styelsheetの読み込みは、HTMLをべた書きするよりもwp_enqueue_scripts使った方がいいですよ。
はじめまして！
以下の記事を参考にしてください。
最初は私も分かりませんでした。
今後、
HTML＋CSS
WordPress
SnowMonkey
等の知識が必要になってきます。チャレンジしてください！！
うむーなんでしょうね。何度かやってみたのですが、こちらでは再現しませんでした（Mac + Chrome 89.0.4389.90）。
この部分は
.block-editor-rich-text__editable [data-rich-text-placeholder]:after {
content: attr(data-rich-text-placeholder);
opacity: .62;
}
という CSS で実現されているみたいなのですが、「文」のところだけなにか別な CSS が当たっていたりしますかね…？（content だと「文」にだけ CSS を当てるのは無理だと思うので、「文」だけ別の HTML が重なっている可能性か、ブラウザのバグ…？とかはあるかも）
Olein_jp様
ご返信ありがとうございます！
アイキャッチ画像がヘッダー画像になるというのをSnowMonkeyのフォーラムのどこかで見たので、ヘッダー画像を設定するにはアイキャッチにヘッダー画像にしたい画像を設定するものだと思っていました。
詳しくありがとうございます。
固定ページ編集で「テンプレート」を「１カラム」にしたり「フル幅」にしたり「右サイドバー」にしたりしていると最終的に「テンプレート」が反映されなくなってしまう（「右サイドバー」にしてもサイドバーが表示されなくなってしまった）部分が解決できていないのですがヘッダー画像については解決しましたので下記に記載します。
【固定ページにヘッダー画像をフル幅で配置する方法】
①固定ページ編集画面を開く
②ブロックから「メディア」の中にある「カバー」を選択しヘッダー画像にしたい画像を選択
③そのままだと黒色でオーバレイされているので、ブロック編集画面の中にある「オーバーレイ」の「不透明度」を「０」にする（もしくは好きな色や透明度を調整）
④「カバーの最小の高さ」を調整して好きな高さに変更できる
以上になります。
解決できましたのでクローズさせていただきます。ありがとうございました！
追記なのですが、パンくずリストが表示されないの記事を拝見しました。
もしmy snow monkey.phpにこちらの記事にあるような記述を行って、my snow monkey.phpで特定した固定ページの
– 一番上にパンくずリストを表示
– デフォルトで表示されるはずのパンくずリストを非表示にする
といった状態にできるようであれば、もちろんそれでも助かります。ご教示頂けましたら幸いです。
なるほど、そういうことだったのですね！
上手く動作しました。ありがとうございます！
特定のページのページタイトルのみにスタイルを当てるために、
このような回りくどいことをやったのですが、
bodyのクラスにpage-id-◯というのが付与されていましたね。
追加CSSでできますね。
jsファイルのエラーについて質問したのですが、別のことにも気づかせていただきました！
ありがとうございました。
Uncaught ReferenceError: jQuery is not defined at common.js は、common.js で jQuery を使っているけど jQuery が定義されていませんよという意味です。
common.js より先に jQuery のファイルを読み込む必要がありますが、common.js の読み込みの依存関係に jquery が指定されていないようです。下記のように変更してください。
add_action(
'wp_enqueue_scripts',
function() {
wp_enqueue_script(
'customize',
untrailingslashit( plugin_dir_url( __FILE__ ) ) . ‘/assets/js/common.js’,
[
'jquery', // ← jQuery を読み込んだ後に common.js を読み込む
\Framework\Helper::get_main_script_handle(), // ← get_template() と指定されていましたが、これは正しくないです。ちなみにこれは Snow Monkey のメイン js を依存指定することになります。
],
false,
true
);
}
);
あと、これは本筋とそれますが、common.js の中に書いているのがスタイルの指定のようなので、js より CSS で記述したほうが体感速度的には良いのではないかと思いました。
Olein_jpさん、キタジマさんどうもありがとうございました。
基本的なところだったのですが、つまづいていており、何度テストしてもできなかったことが実現できたので大変助かりました。
これにてトピックを閉じたいと思います。
お忙しい中ありがとうございます。
宜しくお願い致します。
<?php
/**
* Plugin name: My Snow Monkey
* Description: このプラグインに、あなたの Snow Monkey 用カスタマイズコードを書いてください。
* Version: 0.2.1
*
* @package my-snow-monkey
* @author inc2734
* @license GPL-2.0+
*/
/**
* Snow Monkey 以外のテーマを利用している場合は有効化してもカスタマイズが反映されないようにする
*/
$theme = wp_get_theme( get_template() );
if ( 'snow-monkey' !== $theme->template && 'snow-monkey/resources' !== $theme->template ) {
return;
}
/**
* Directory url of this plugin
*
* @var string
*/
define( 'MY_SNOW_MONKEY_URL', untrailingslashit( plugin_dir_url( __FILE__ ) ) );
/**
* Directory path of this plugin
*
* @var string
*/
define( 'MY_SNOW_MONKEY_PATH', untrailingslashit( plugin_dir_path( __FILE__ ) ) );
// 実際のページ用の CSS 読み込み
add_action(
'wp_enqueue_scripts',
function() {
wp_enqueue_style(
'my-snow-monkey',
untrailingslashit( plugin_dir_url( __FILE__ ) ) . '/style.css',
[ Framework\Helper::get_main_style_handle() ],
filemtime( plugin_dir_path( __FILE__ ) )
);
}
);
add_action(
'snow_monkey_prepend_body',
function() {
?>
<div class="c-page-effect" data-page-effect="fadein" aria-hidden="false">
<div class="c-page-effect__item">
<div class="c-circle-spinner"></div>
</div>
</div>
<?php
}
);
add_filter(
'snow_monkey_template_part_root_hierarchy',
function( $hierarchy ) {
$hierarchy[] = untrailingslashit( __DIR__ ) . '/override';
return $hierarchy;
}
);
add_shortcode(
'my_breadcrumbs',
function() {
ob_start();
\Framework\Helper::get_template_part( 'template-parts/common/breadcrumbs' );
return ob_get_clean();
}
そちらを修正したところ画像が添付されました。
良かったです！
ファイルのname属性を現在はfile-imageとしています。画像sample.jpgをアップすると、受信したメールにはfile-image-sample.jpgとして記載がなされて、画像が添付されているのですが、この形でいいのかアドバイス頂けましたら幸いです。
name 属性 + 元ファイル名となるのが仕様です。
コードに少しミスがありました。下記に修正しても変化無いでしょうか？
add_shortcode(
'my_breadcrumbs',
function() {
ob_start();
\Framework\Helper::get_template_part( 'template-parts/common/breadcrumbs' );
return ob_get_clean();
}
);
Olein_jpさん、キタジマさん、ご回答ありがとうございます。
Olein_jpさんのおっしゃる
{all-fields} で出力していれば問題ありませんが、個別でメールテンプレートにスラッグを入力している場合、（僕だけかな？）たまに書き忘れがあったりするので、よろしければスラッグ記載のご確認も今一度されてみても良いかもしれません。
がまさに抜けていたところでした。そちらを修正したところ画像が添付されました。大変お恥ずかしい限りです。ありがとうございます。
{all-fields} でも一度試してみてそちらのほうで問題なければ、今後はそうしてみよう(書き漏れがあると困るなと思いまして…)とも思っています。
よろしければ最後にご回答いただけると大変ありがたいのですが、ファイルのname属性を現在はfile-imageとしています。画像sample.jpgをアップすると、受信したメールにはfile-image-sample.jpgとして記載がなされて、画像が添付されているのですが、この形でいいのかアドバイス頂けましたら幸いです。
あ、ほんとですね、フル幅もパンくずなしの仕様でした。失礼しました。
パンくずリストの下にタイトルが表示されてしまいます。
とのことで、場所も決まった場所ではなく自由な場所に配置されたいのかなと思いますので、ショートコードにしてしまうのが良いかもですね。下記のコードを My Snow Monkey プラグイン、あるいは子テーマの functions.php に貼り付けて、
add_shortcode(
'my_breadcrumbs',
function() {
\Framework\Helper::get_template_part( 'template-parts/common/breadcrumbs' );
}
);
記事中に [my_breadcrumbs] と入力すると、ページにパンくずが表示されないでしょうか？
CSS でやるのが一番手っ取り早いかもです。全幅設定は解除して下記の CSS を追加。
.p-global-nav {
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
}
