ご検討いただけるようで嬉しいです。ありがとうございます！
画角がバラバラの画像をアップロードされたとき、画像の大きさに比べてテキスト量が多すぎるとき、などの想定外の内容を設定されたときにどう対応するのが良いのかでちょっと迷っていまして。
確かにそうですね。僕は短めのテキストとサイズを揃えた画像を想定してましたが、色々な使い方が想定されますよね・・・
バナーの性質上、トリミングしないで表示したいという需要も高いと思うんですよね。
IllustratorやPhotoshopで文字も含めてデザインしたバナーを使う場合は、テキストを上に乗せないと思うので、トリミングしないで表示したい需要はありますよね・・・。僕も使うと思います。
その設定をもたせるのがベストな気がしているので、もうちょっと考えてからつくり始めようと思います。
全部が簡単に設定できるとユーザーは便利ですが、複雑になりすぎるなら、
・画像の画角を保つ
のチェックだけあって、チェックが入っている場合はノマドGOのように画角を保ちつつ縮小して表示。チェックなしの場合はトリミングされるという感じでも良いかもですね。
トリミングされる場合の比率は１つをデフォルトにして、画像をデフォルト以外の比率にしたい場合は追加CSSで対応とかでしょうか。（コードがブログカスタマイズ記事にあれば嬉しいです。）
SnowMonkeyの思想に合わせて、お任せいたします〜
スマホのときだけ切れないように、ということであればこんな感じでしょうか。追加 CSS か子テーマの CSS ファイルに下記を追加してみてください。
@media (max-width: 639px) {
.c-page-header[data-has-image="true"] {
padding: 0;
min-height: auto;
height: auto;
}
.c-page-header__bgimage {
position: static;
}
.c-page-header__bgimage>img{
position: static;
object-fit: contain;
height: auto;
min-height:auto;
min-width: auto;
}
}
画角がバラバラの画像をアップロードされたとき、画像の大きさに比べてテキスト量が多すぎるとき、などの想定外の内容を設定されたときにどう対応するのが良いのかでちょっと迷っていまして。
ノマドGOの場合だと
画像の画角は変えずに（縮小して）表示＆テキスト量が大き場合は画像からはみだす
WING SAMPLE の場合だと
テキスト量にあわせてバナーサイズが伸縮し、画像はそれを埋める形で表示される（つまり一部トリミングされる）
というようになっています。個人的には画像をトリミングしたほうがデザインが破綻しないようにコントロールしやすいのでトリミングしたいところですが、バナーの性質上、トリミングしないで表示したいという需要も高いと思うんですよね。とすると、
・画像の画角を優先
・テキスト表示を優先
・16:9 で表示
・4:3 で表示
みたいな設定をもたせたほうが良いのかなぁとか考えていると結構難しくなってきて…。が、その設定をもたせるのがベストな気がしているので、もうちょっと考えてからつくり始めようと思います。
ヘッダーコンテンツ機能を使うのが一番簡単だと思います。
HTML が使えるので、
000-0000-0000<br>
<a class="c-btn" href="#">お問い合わせ</a>
みたいな感じで入力するとどうでしょうか？
1. PCで見た時のテキストエリア幅を全体的にもう少し広げたい
例えば下記の CSS を追加してみるとどうでしょうか？ 50rem の部分は、基本文字サイズで50文字分の幅、という意味になります。
.u-slim-width {
max-width: 50rem !important;
}
2. スマホで見た時に文字が画面ギリギリなので余白を作りたいです。
うーんこれは通常きちんと余白がつくはずなので（Snow Monkey 公式サイトも余白がついているかと思います。 => https://snow-monkey.2inc.org/campaign-100gpl/）、例えばカスタマイズで追加した CSS が影響しているとか、設定の組み合わせ等で僕が意図していない不具合があったか、が怪しいと思います。実際の画面をデベロッパーツールで調査すればおそらくすぐ原因がわかるのではないかと思うのですが、実際の画面の URL を教えていただくことは可能でしょうか？
特定の１ページのみ、または、特定のカテゴリ・タグのみに表示したい場合は、どのようにコードを記載すればキレイに動作するかご教授頂けますと幸いです。
例えばこんな感じでしょうか。
add_filter(
'snow_monkey_template_part_render',
function( $html, $slug ) {
// Footer CTA じゃないときは無視
if ( 'footer-cta' !== $slug ) {
return $html;
}
// 以下、Footer CTA の場合
// Post ID が 5 の固定ページの場合は表示
if ( is_page( 5 ) {
return $html;
}
// カテゴリー ID が 6 のカテゴリーページの場合は表示
if ( is_page( 5 ) {
return $return;
}
// それ以外の場合は表示しない
return;
},
10,
2
);
下記のページのその他の条件分岐タグがまとめてあるので、いろいろ試してみてください！
カスタマイザーで px 数を入力させる形になっていると、とても使いやすいと思います！
こちら実装できそうか調査すすめますね。
いつでもお手すきのときにで構いません〜
文字だけで書いちゃったので分かりにくいですが、要するに下のキャプチャみたいなレイアウトが、項目ブロックやパネルブロックみたいな感じで、実装できたら良いなぁと思ってます〜。
１．ページごとに表示・非表示設定
ページごとに設定を設けるのは煩雑になりそうなので、GUI をつくるのはどうかなと思いますが、現状でもコードで出し分けは可能です。例えば下記のコードだと、ID が5の固定ページの場合は表示しない、となります。
add_filter(
'snow_monkey_template_part_render',
function( $html, $slug ) {
// Footer CTA じゃないときは無視
if ( 'footer-cta' !== $slug ) {
return $html;
}
// 以下、Footer CTA の場合
// Post ID が 5 の固定ページの場合は何も表示しない
if ( is_page( 5 ) ) {
return;
}
return $html;
},
10,
2
);
２．追尾バナーを複数作成
これはちょっと現状の仕組みだと難しいですね…。
表示開始位置を遅らせる
これは、できそう、かつあったほうが良さそうなので実装したいなと思うのですが、どうやって指定させてら良いのか迷いますね…。「ページ内の最初のh2」としちゃうとh2が無いページだと CTA が表示されない、とかなっちゃうので、例えば1000pxスクロールしたら、とかならカスタマイザーで px 数を入力させる形にできるかなと。
.c-container は追加しないにしても、wrapper は最初からあったほうが良いかもですねー
例えばこんな感じはどうでしょうか？
PHP
add_filter(
'snow_monkey_template_part_render',
function( $html, $slug ) {
if ( 'template-parts/common/breadcrumbs' !== $slug ) {
return $html;
}
return '<div class="p-breadcrumbs-wrapper"><div class="c-container">' . $html . '</div></div>';
},
10,
2
);
CSS
.p-breadcrumbs-wrapper {
margin: 0 calc(50% - 50vw);
background-color: #f5f5f5;
padding: .5em;
}
.p-breadcrumbs-wrapper .c-container {
padding-right: 1.86957rem;
padding-left: 1.86957rem;
}
@media (min-width: 40em) {
.p-breadcrumbs-wrapper .c-container {
padding-right: calc(1.86957rem + env(safe-area-inset-right));
padding-left: calc(1.86957rem + env(safe-area-inset-left));
}
}
.p-breadcrumbs-wrapper .c-breadcrumbs {
margin: 0 !important;
}
jQuery等そこまで知識がなく、標準のものからCloudflareのものに差し替えているという認識すらありませんでした。
Cloudflareを調べてみたところ、CDNサーバを経由して読み込み速度を上げるという記事に辿り着きまして
読み込み速度を上げるために使用していたpage speed ninjaというプラグインが怪しいと思い、停止してみたところ無事表示されました。
ありがとうございました。
> んー、今割り当て可能にはなっていないはずなのですが、どうやって割り当てましたか？
サイトで今確認したところ、確かに出なくなってますね。
昨日のアップデート前くらいに色々調整していたので、旧バージョンだったかなと思って戻してみましたが、
何も変わらない。どうやって出してたのか…って感じです。
手順として、固定ページで下書きを作ってから、プロフィールの部分の記事一覧から表示したページのカスタマイズとか押したか何かしてそのページのカスタマイザーを直で開いて割り当てした感じだったと思います。
そのやり方で検索にも割り当てが出来てたのですが今だと出来ない（謎
再現できたら再度書きます。
関係ないと思いますが、パンくずがカスタマイザーのプレビューだと
> ホーム > admin
って出てるのですが、これって前からでしたっけ？
下記の部分をぽちっとやると設定が表示されないでしょうか？
もしくは、下記のコードを My Snow Monkey プラグイン、もしくは子テーマの functions.php に貼り付けると、コメントとトラックバックの表示を強制的に非表示にできます。
// コメントを非表示に
add_action(
'snow_monkey_get_template_part_template-parts/discussion/comments',
function() {
}
);
// トラックバックを非表示に
add_action(
'snow_monkey_get_template_part_template-parts/discussion/pings',
function() {
}
);
・上に上げたページでは、テーマのデフォルト画像がアイキャッチとしてでていますが、これはなぜですか
使用されているデザインスキンで指定されているのだと思います。
・カスタマイザーからデフォルトアイキャッチ画像を登録する場合、縦横何ピクセルの画像を登録すればよいですか？（ヘッダ画像も知りたいです）
特に決まったサイズはありません。ある程度切れてもおかしくない画像を登録するのが良いと思います。
・ヘッダ画像を登録すれば、固定ページにも表示される？
デフォルトページヘッダー画像を、ということですよね？表示されます。
・ページ下の関連ページのアイキャッチも自動的に小さい画像が生成される？
WordPress が自動的に生成するサムネイルを使用します。
