パラメーターには、WP_Query と同じものが使用できます。
下記のような感じでどうでしょう？
// ID 番号が 12345 のウィジェットが表示する記事の条件を変更する
// pickup タグ + ランダム + 3件
add_filter( 'snow_monkey_recent_posts_widget_args_12345', function( $query_args ) {
$query_args['tag'] = 'pickup';
$query_args['posts_per_page'] = 3;
$query_args['orderby'] = 'rand';
return $query_args;
} );
PC とスマホでの出し分けについては、1列にするより消すほうが簡単なので、消すサンプルを。
/* PC では最後の1個を消す */
/* 下記の例だと Snow Monkey: 最近の投稿ウィジェット全部に反映されるので、特定のウィジェットにだけ適用したいなら id セレクタで指定したほうが良いかも */
@media (min-width: 64em) {
.snow-monkey-recent-posts .c-entries__item:last-child {
display: none;
}
}
before/after に FontAwesome を表示する方法、Snow Monkey v3 以降は使用できなくなりました！ Snow Monkey v3 から、FontAwesome5 対応にしたのですが、FontAwesome5 が js 描画推奨となっており、アイコンフォントを読み込む従来の方法を使用しなくなったためです。
ウィジェットタイトルに HTML 許可させるようにしようと思ったのですが、WordPress のデフォルトウィジェットは HTML 許可されてないっぽいので、Snow Monkey オリジナルウィジェットもそれにあわせたほうが良いかなと思います。
なので、Snow Monkey v3 以降の場合だったら、js で追加してもらうのが良いですかね…。
下記のスレッドの中でコードサンプル書いていますので、確認されてみてください！
こうですかね。
add_filter( 'walker_nav_menu_start_el', function( $item_output, $item, $depth, $args ) {
if ( 'social-nav' !== $args->theme_location ) {
return $item_output;
}
if ( false !== strpos( $item->url, 'behance.net' ) ) {
$item_output = str_replace( '<i class="fas fa-globe"></i>', '', $item_output );
return str_replace( $args->link_before, '<i class="fab fa-behance-square"></i>' . $args->link_before, $item_output );
}
return $item_output;
}, 11, 4 );
でもこれ思いましたが、Snow Monkey 自体が Behance をサポートしたほうが良いですよね。次のアップデートで追加します！お急ぎであれば、アップデートまでの間上記のコードをお使いくださいまし。
下記のサイトを参考に、
.snow-monkey-recent-posts__more:after,
{
content: " \f138";
font-family: FontAwesome;
}
のように、やればできました。お騒がせしました。
なるほど、こちらのファイルですね…！とコピペして自分なりにfunctions.phpに追記してみましたが、なかなかうまくいきませんでした…
// ソーシャルナビゲーションのアイコンを追加する
add_filter( 'walker_nav_menu_start_el', function( $item_output, $item, $depth, $args ) {
if ( 'social-nav' !== $args->theme_location ) {
return $item_output;
}
if ( true !== strpos( $item->url, 'behance.net' ) ) {
return str_replace( $args->link_before, '<i class="fab fa-behance-square"></i>' . $args->link_before, $item_output );
}
}, 10, 4 );
この記述で添付の画像みたいになってしまいました…。
（PHPに疎く、かなり初歩的なところでつまづいている気がして大変恐縮なのですが、）
既にあるfunctionに対して上書き？で追加するのはどのようにしたら良いでしょうか…？？
さっきのコードだと、余白が変なことになっていたので、
打ち消して、前回のCSSをかけるという方法だとうまくいきました。
.wpaw-slider .wpaw-slider__item {
min-height: initial !important;
}
.wpaw-slider .slick-slide {
max-height: 540px; /* 好きな高さ */
}
回答ありがとうございます。
min-heightで、自分のやりたいように、うまく行かなかったので、
.wpaw-slider .wpaw-slider__item {
min-height: initial !important;
max-height: 540px; /* 好きな高さ */
}
という形で、min-heightを打ち消して、
元々、指定していたmax-heightの指定を生かすという方法だと前の表現にできました。
ちょっと強引なやり方ですかね・・・
そうなんです、FontAwesome5 から JS 版が推奨とあったので CSS 版から JS 版にしたのですが、使い勝手わるいですよね…軽くはなってると思うのですが…。
ソーシャルナビゲーションのアイコンについては、PHP で URL を判定して置換処理を行っています。
子テーマをお使いでしたら、子テーマの functions.php で、上記と似たような感じで walker_nav_menu_start_el にフックさせて置換処理を書くことで実現できるかと思います。
リスト型の最近の投稿系ウィジェットはちょっと種類を作りすぎたなぁというのは後悔していて、「Snow Monkey: 最近の投稿」のようなリッチメディア型のウィジェットはこれ1つに留めていたりします…。
「Snow Monkey: 最近の投稿」にはフィルターフックが仕込んであって、表示する一覧の条件を任意にカスタマイズできます。詳しくは下記をご参照ください。
カスタム投稿タイプの最新記事だと、こういう感じですかね。
// ID 番号が 12345 のウィジェットが表示する記事の条件を変更する
add_filter( 'snow_monkey_recent_posts_widget_args_12345', function( $query_args ) {
$query_args['post_type'] = 'news';
return $query_args;
} );
3.1.2 でスライダーの仕様が変更になりまして、これまでトップページではスライダーウィジェットの高さが 70vh だったのが、どこに設置しても 16:9 のアスペクト比で表示する（ただし中身のタイトルなどが長い場合はその分縦に伸びる）、というようになりました。
その影響で、前述したコードは正しく適用されなくなりました。
3.1.2 以降の場合、下記のような感じでどうでしょうか？
.wpaw-slider .wpaw-slider__item {
min-height: 540px !important;
}
.wpaw-slider .slick-slide ではなく .wpaw-slider .wpaw-slider__item の CSS を上書き.wpaw-slider .wpaw-slider__item の min-height を好きな高さで固定
下記でいかないですかね？
@media (min-width: 64em) {
.c-entry__header .c-entry__title {
font-size: 2rem;
}
}
アイキャッチ画像をヘッダー画像に使用するというもともとの仕様が良くなかったなぁと思っていました^^;
カスタマイザーや記事編集画面に
「ページヘッダー用画像（これが設定されていたら優先表示）」
とか
「デフォルトヘッダー画像が設定されていたらアイキャッチ画像をヘッダー画像に使用しない」
のようなチェックボックスを追加すれば、動作的には実現できるかなぁと思いますが、ちょっと使用面でも開発面でも多少混乱を呼び込んでしまいそうな気がするので、フィルターフックなりを追加して、やりたい人はやる、みたいな感じにしようかなと思います。（先日追加した「ヘッダー位置をモバイルのみに適用」も、もともとの仕様がわるかったために発生してしまった悪例だと思っています…）
使ったことはないですが、背景の色を判定して文字色を変更してくれるライブラリもあるみたいですね。
ありがとうございます。
@importの方法は速度が気になっていたので勉強になりました。
‘font-weight: bold;’を指定しないと表示されないなどにはまったものの、CSS版でも今のところ問題なく動いています。ただ、まずはjs版を使う方法を試してみます。
これは、 （URL は運営側で削除） の URL を指定したブログカードが表示されないということでしょうか？
それとも、ヘテムルとロリポップとkusanagiにおいて、どのサイトの URL を指定してもブログカードが表示されないということでしょうか？後者の場合、例えば YouTube の URL を貼り付けるとどうでしょうか？（正常であれば動画が表示されます）
僕の環境では、 （URL は運営側で削除） の URL を記事に貼り付けると、正しくブログカードが表示されました。プラグインを全て停止しても NG ということでしたら、例えば海外 IP は遮断するとか、何らかの制限がサーバー側でかかっていると表示されないことはあるかもしれません。
「若干のコード変更」は <i class="fa〜 で指定する方法のことを指していました！描画になったので、CSS で content を指定する方法についてはもう少し複雑になります。子テーマに js ファイルを追加して、下記のようなコードを足すことで実現できます。
jQuery(function($) {
// 本当はセレクタは .entry__content > ul > li とかが良いかも
$('ul il').prepend($('<i class="fas fa-angle-right" />'));
});
before を指定するわけではなく i タグを突っ込んでいるので多少 CSS で位置調整が必要かと思います。
もし js 版ではなく CSS 版をお使いになりたい場合は、子テーマの functions.php で指定して読み込ませたほうが良いかと思います（ @import は低速になることが多いようです）。
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style(
'fontawesome5',
'https://use.fontawesome.com/releases/v5.0.10/css/all.css'
);
} );
ただ、Snow Monkey が js 版を読み込んでいるので、同時に CSS 版を読み込んだときにどういう不具合がおきるのかおきないのかはちょっとわかりません。なるべくは最初の js で対応する方法が推奨ではあります。
