返信ありがとうございます。
TOPページに見出し書いてみました。
TOP
セクションは使用していません。
class名が間違っているのでしょうか。。。
公式サイトの『 Snow Monkey を CSS でデザインカスタマイズしてみよう！』
からそのままコピペして色だけ修正してみました。
スキルなくすみません。
いつもありがとうございます。
Kmical Lights様、ご回答ありがとうございます。
頂いたコードで無事に実行できました！
my snow monkeyに下記を加えてお試しください。
add_filter( 'snow_monkey_related_posts_args',
function( $_args ) {
// 最大数の変更
$_args[ 'posts_per_page' ] = 12;
return $_args;
}
);
関連記事に該当する記事件数が12件未満の場合は、必ずしも12件表示される訳では無いので、
最大数として12件表示する形となります。
もし、１２件固定で出したい場合は関連記事として該当させる条件も変更する必要があるかもしれません。
その場合は再度返信などでご質問ください
デフォルトだと表示サイズが 4:3 になっているので、CSS を追加して 16：９ にするのが簡単だと思います。下記を追加するとどうでしょうか？
.c-entry-summary .c-entry-summary__figure::before {
padding-top: 56.25%;
}
今後、ウィジェットエリアでもブロックが使えるようになるみたいなので、余程のことがない限りカスタムウィジェットについては手を入れないようにしようと考えています。また、スライダーには Slick を使っていますが、Slick に依存することで速度面やメンテナンス面での問題がみえてきているので、今後 Slick を使ったウィジェットやブロックは非推奨にする方針です。
ということで、コードを追加してカスタマイズしてみていただければと思います。下記のコードを My Snow Monkey に貼り付けてみてください。
add_action(
'wp_footer',
function() {
?>
<script>
window.addEventListener(
'load',
function() {
jQuery('.wpaw-slider__canvas').slick('slickSetOption', 'pauseOnHover', false, true);
},
false
);
</script>
<?php
}
);
これでどうでしょう？
投稿タイプが news、タクソノミーが news_category の想定で書いています。
add_action(
'wp_head',
function() {
// news 詳細ページのときだけ
if ( is_singular( 'news' ) ) {
// デフォルトのカテゴリー表示を削除
remove_action( 'snow_monkey_entry_meta_items', 'snow_monkey_entry_meta_items_categories', 40 );
// 新しいカテゴリー表示を追加
add_action(
'snow_monkey_entry_meta_items',
function() {
// タクソノミーを指定
$terms = get_the_terms( get_the_ID(), 'news_category' );
?>
<?php foreach ( $terms as $term ) : ?>
<li class="c-meta__item c-meta__item--categories">
<span class="screen-reader-text"><?php echo esc_html( $term->label ); ?></span>
<i class="fas fa-folder" aria-hidden="true"></i>
<a href="<?php echo esc_url( get_term_link( $term ) ); ?>"><?php echo esc_html( $term->name ); ?></a>
</li>
<?php endforeach; ?>
<?php
},
40
);
}
}
);
Snow Monkey は紐づくいずれかのタクソノミーをみつけてラベルを表示するようにしているのでそのような挙動になります。My Snow Monkey プラグインにカスタマイズコードを書くことで挙動を変更することができます。
コードを書いてみますのでお待ちいただければと思います！
@Kmical Lights さんありがとうございます！
@ACE さん
サイトみてみました。高度な設定に「.order-reverse」と入力されていると思いますので、ここは「order-reverse」とドットなしで入力してください。
そして、追加 CSS に貼り付ける内容をこちらに差し替えてください。
@media (max-width: 1023px) {
.order-reverse .c-row--reverse .c-row__col:first-child {
order: -1;
}
}
このスマホの順番については他の方からもちょこちょこ要望をいただくので、メディアと文章ブロック自体に機能を追加しても良いかなと思っています。8月に予定されている WordPress 5.5 の対応が落ち着いたら、作業したいなと考えているので、それまではこの CSS を使ってもらえればと思います。
原因がわかりました。本来 Spring は PC でも強制的にオーバーレイヘッダーになるデザインスキンでして、オーバーレイヘッダーの場合はアイキャッチ画像の表示がページヘッダーでないとコンテンツにヘッダーが重なってしまうため、アイキャッチ画像の表示もページヘッダー固定になるようにしていました。
それが不具合で、
– PC でオーバーレイヘッダーにならない
– 「アイキャッチ画像の表示」の項目があやまって表示されてしまっている
という状態になっているようです。本来の
– PC でもオーバーレイヘッダーに
– 「アイキャッチ画像の表示」はページヘッダー固定で、カスタマイザーから変更できない
に修正しようと思います。その上で、ヘッダーのオーバーレイ表示やアイキャッチ画像の表示をページヘッダー以外にしたい、ということであれば修正後にカスタマイズコードを共有するようにします。おまたせしてすみません！
CSS記述は追加CSSに追加します。
管理画面の、「外観」→「カスタマイズ」→「追加CSS」です。
「メディアと文章」でAとBとして２つ並べていると思いますので、
そのBの方の「メディアと文章」ブロックの「高度な設定」に
.order-reverseと追加で記述すれば、Bの方の並びだけを変更できると思います。
（Aは変更しないと思うのでそのまま何もしません）
CSSの記述を解説しますと、下記の通りです。
@media screen and (max-width: 639px) { # 639ピクセル以下に囲まれているスタイルを適用する
.order-reverse .c-row__col:first-child { # c-row__colクラスの最初の要素を…
order: 2; # 並び順(order)を2番目にする（0から始まるので実際は3番目だが、説明を解りやすく）
} # order-reverseのスタイルのカッコ閉じ
} # @mediaのカッコ閉じ
そのため、order-reverseクラスと言ったスタイルを適用した場合のみ、「メディアと文章」などに
639ピクセル未満の場合、最初の要素の並び順を2番目にするカスタマイズが可能となります。
ありがとうございます！
試してみたのですがうまくいかず、さらに質問させてください。（CSSについての知識はほとんどありません…）
リンク先にあった追加CSS：
@media screen and (max-width: 639px) {
.order-reverse .c-row__col:first-child {
order: 2;
}
}
は、このまま「高度な設定」にコピペすれば良いでしょうか。
また、メディアと文章とのどちらの「高度な設定」に追加したら良いでしょうか。
教えていただけるとありがたいです！
を参考にして、高度な設定にorderのスタイルを追加する事でできると思います。
divで設定された要素の並び順を変えるので、上手く使えば文章と画像などの要素も自由に並び順を切り替えできると思います。
お試しください。
