子テーマの作成が必要ですが可能です。子テーマを作成し、子テーマの functions.php に下記のコードを貼り付けてみてください。
※このサイトのセキュリティの関係で script という文字が送信できないので、scrip と記述しています。実際にコピペするときは script に置き換えてください。
add_action( 'wp_footer', function() {
?>
<style>
.wpaw-slider .slick-arrow {
z-index: 1;
background-color: #bd3c4f;
border-radius: 0;
height: 40px;
width: 40px;
transition: all 0.2s ease-out;
}
.wpaw-slider .slick-arrow span {
color: #fff;
font-size: 20px;
}
.wpaw-slider .slick-arrow::before {
display: none;
}
.wpaw-slider .slick-prev {
left: 0;
transform: translate(-100%, -50%);
}
.wpaw-slider .slick-next {
right: 0;
transform: translate(100%, -50%);
}
@media (min-width: 40em) {
.wpaw-slider .slick-arrow {
height: 50px;
width: 50px;
}
}
@media (min-width: 64em) {
.wpaw-slider .slick-arrow:hover,
.wpaw-slider .slick-arrow:active,
.wpaw-slider .slick-arrow:focus {
background-color: #aa3647;
}
.wpaw-slider__canvas:hover .slick-arrow,
.wpaw-slider__canvas:active .slick-arrow,
.wpaw-slider__canvas:focus .slick-arrow {
transform: translate(0, -50%);
}
}
</style>
<scrip>
jQuery(function($) {
var slider = $('.wpaw-slider__canvas');
slider.slick('slickSetOption', 'arrows', true, true);
slider.slick('slickSetOption', 'prevArrow',
'<button class="slick-prev slick-arrow" aria-label="Previous" type="button"><span><i class="fas fa-angle-left"></i></span></button>',
true
);
slider.slick('slickSetOption', 'nextArrow',
'<button class="slick-next slick-arrow" aria-label="Next" type="button"><span><i class="fas fa-angle-right"></i></span></button>',
true
);
});
</scrip>
<?php
} );
コードが長いので、functions.php に全部書くんじゃなくて、CSS ファイルと JS ファイルを作成し、それぞれそこに記述するほうが先々の管理を本当は考えると良いかもしれません…。
返信有難うございます。
トップページに投稿した記事一覧を表示した際、アイキャッチ画像の下に記事の冒頭部分が抜粋された形で表示されます。
投稿冒頭の文章が長いと、途中で[…] になってしまうので、TwitterやFacebookにシェアする時の場合も考え、この部分に文章を別に入力したいと考えました。
画像左下のファブラボの記事は[…] が表示されていないのですが、これは、WordPress移行前にライブドアブログで書いた際に、設定した関係で表示されていないのだと思います。
教えていただいた方法をチョット試してみます！
今は Elementor みたいにどのウィジェットも普通に使える感じでしょうか？
自分が導入しているプラグインでは対応しているものはありませんでした。
偶然見つけて入れてみたプラグインがGutenbergに対応していたのを見つけたので、追記させていただきます。
Japanese font for TinyMCE
Gutenbergに対応させる(beta)という設定があり、これを有効化すると項目に出てきます。
またこんな情報もありました。
少しでも参考になれば幸いです。
記事を一覧表示する際に
これはブログのトップページということでしょうか？
今は、例えばブログトップページなら「ダッシュボード > 設定 > 一般 > キャッチフレーズ」に入力したものが og:description に出力されるようになっています。
カテゴリーやタグの場合は、カテゴリー/タグ編集画面の「説明」に入力されたものが使用されます。
もっと自由にカスタマイズしたい場合は、inc2734_wp_ogp_description フィルターフックでカスタマイズが可能です。子テーマを作成し、子テーマの functions.php に次のようなコードを記述してみてください。
add_filter( 'inc2734_wp_ogp_description', function( $description ) {
if ( is_category( '任意のカテゴリーのスラッグ' ) ) {
return '自由な og:description！';
} elseif ( is_page( '任意の固定ページのスラッグ' ) ) {
return 'この固定ページはxxの内容について記述しています';
}
return $description;
}
子テーマでテンプレートを上書きすると、親テーマ（ここでは Snow Monkey ですね）のアップデートが子テーマに反映されないという問題がどうしても発生します。
そのため、親テーマでは「いかに最小単位で必要な部分だけを子テーマで上書きできるようにするか」というのが大事になってくるのですが、Snow Mokey では独自のテンプレート構造を用いることでそれを実現しています。
Snow Monkey の基本的なテンプレート構造は次のようになっています。
（カテゴリーページの場合）
- archive.php
- 大枠のレイアウトが定義されたレイアウトファイル (
templates/layout/xxxx.php ) の読み込み
- コンテンツ部分が定義されたビューファイル (
templates/view/archive-投稿タイプ.php ) の読み込み
それぞれにどのようなコードを書けば良いかは Snow Monkey のレイアウトファイル、ビューファイルを参考にしてもらえればと思いますが、ヘッダー、サイドバー、フッターの読み込みについては、これも独自のコードで読み込むようになっておりまして、それぞれ次のようになります。
- ヘッダーファイルの読み込み (
wpvc_get_header( 'xxxx' ) で /templates/layout/header/xxxx.php を読み込み )
- サイドバーファイルの読み込み (
wpvc_get_sidebar( 'xxxx' ) で /templates/layout/sidebar/xxxx.php を読み込み )
- フッターファイルの読み込み (
wpvc_get_footer( 'xxxx' ) で /templates/layout/footer/xxxx.php を読み込み )
大枠レベルでデザインを変えたい場合
子テーマで変更しやすいようにカテゴリー専用のファイルは用意していないので archive.php 起点になっていますが、もしヘッダー・フッター・サイドバーとか大枠レベルでカテゴリーごとにデザインを変えたい場合は category-slug.php を作成し、その次のように記述します。
if ( have_posts() ) {
$controller->render( 'category-slug' );
} else {
$controller->render( 'none' );
}
そして、/templates/layout/wrapper/category-slug.php を作成して大枠の HTML を記述、/templates/view/category-slug.php を作成してビュー部分の HTML を記述、という手順になります。
ビュー部分（一覧が並ぶ部分）だけデザインを変えたい場合
いろいろやり方はありますが、たぶん次の方法がベストだと思います。
category-slug.php を作成し、その次のように記述します。
if ( have_posts() ) {
$controller->render( 'category-slug' );
} else {
$controller->render( 'none' );
}
そして、/templates/view/category-slug.php を作成してビュー部分の HTML を記述してください。
カテゴリーごとに異なる CSS ファイルを読み込ませる
header 部で、個々に css ファイルをリンクなどさせればよろしいかと思いますが、
と書かれていましたが、WordPress は header.php などに直接 link タグで CSS を読み込むことを推奨していません。CSS の読み込みは wp_enqueue_scripts アクションフックの中で、wされています。wp_enqueue_style を使っておこなうことが推奨されています。例えば、子テーマの functions.php に次のように記述します。
add_action( 'wp_enqueue_scripts', function() {
if ( is_category( 'slug' ) ) {
wp_enqueue_style( 'category-slug', get_stylesheet_directory_uri() . 'category-slug.css' );
}
} );
多分これを読んでも初見ではなかなか慣れなくて難しいと思いますので、ちょっと試されてみて、またご質問いただければと思います（慣れればこのような構成にしている利点が見えてくると思います…！）
テンプレート階層のルールに基づいて、テンプレートを用意していけば良いのですが、テーマの構造が通常のものと異なるので教えてください。
たとえば、投稿ページのカテゴリーごとにデザインを変えるとき、テンプレートの階層構造に従って、
category-[slug].php
header-[slug].php
footer-[slug].php
sidebar-[slug].php
と、作成をしていき、
header 部で、個々に css ファイルをリンクなどさせればよろしいかと思いますが、
snow-monkey でその設定をどう行えば良いのか分からないでおります。
キタジマさん、早速のご対応、ありがとうございます！
無事に、サムネイルリンクがされているのを確認しました^^
それから、ピックアップスライダーの件、了解しました。
そういうことであれば、テンプレートの上書きとカスタマイズ、知りたいです^^
よろしくお願いします。
※個人的には、ゴーストボタンってあっても見逃しちゃうことが多いので
こういう「コンテンツの見出し（入り口）」的なものに設置されている場合は
その画像ないしエリアにリンクが貼られていることを伝えるための「デザイン的なお飾り」アイテムだと思っていて、
ボタンがあることに気づいたひとはそこをクリックすれば良し
気づけなくても、画像ないしエリア全面にリンクがあれば問題なし、と思っているのですが
そこは、それぞれの考え方があるかな、とは思います^^
一応、以下、ご参考までに…
Snow Monkey サイトのメンバー限定記事は、WooCommerce Subscriptions プラグインと連動して制限をかける独自のプラグインをつくっています。
結構コード量が多いので、やるなら functions.php よりもプラグインをつくったほうが良いかなと思います。でも、結構ニーズある機能だと思うので、探したらつくらなくてもプラグインあったりするかもですね。
使ったことはないですが、これとかどうですかね。
ピックアップスライダーについて、やはりボタンがあるならボタンだけ押せる、というのが UI 的に混乱が少ないと思いますし、これについては子テーマでカスタマイズして全面リンクにして頂くのがスマートかなと思います。テンプレートの上書きとカスタマイズが必要になるのでちょっと難しめかもしれませんが、その方法でよければご提示できるように試してみます。
ショーケースのサムネイルクリックについては、確かにそのほうが良いかなと！サムネイルがリンクになっている UI は結構多いので。これについては 4.0 正式リリースまでに反映させるようにします！
カスタム投稿タイプについては、どのような内容を表示したいかがユーザーによって全く異なる可能性が高いので、デフォルトではかなりシンプルな状態にして、必要に応じてカスタマイズしてもらう、という形にしています。
templates/view/content.php はフォールバック的に用意しているデフォルトのテンプレートでして、カスタム投稿タイプを使用される場合は templates/view/content-news.php のような感じでカスタム投稿タイプ名を加えたファイルを子テーマにつくるとそれが使用されるようになります。複数のカスタム投稿タイプを利用される場合はそれぞれにそれぞれのテンプレートを作成できるので便利です。
ヘッダー = head タグという認識であっていますでしょうか？
head タグの中に任意のタグを書き込む場合は wp_head アクションフックを使用することをお勧めします。テーマやプラグインによってはカスタマイザー等で入力できるようになっているものもあると思うのですが、セキュリティの問題や WAF の問題を考えるとあまり自由入力欄は設けるべきではないというのが僕の考えです。
wp_head アクションフックを使って head タグの中に任意のコードを追加するには以下のようなコードを子テーマの functions.php に追加してみてください。
add_action( 'wp_head', function() {
?>
// ここに任意のタグを記述
<?php
} );
その後解決したかは忘れちゃいましたが、今は Custom Post Typer Permalinks プラグインにすべておまかせして、細かいパーマリンクの調整はすることはしなくなりました。やっぱりパーマリンクを地力でカスタマイズすると 404 とか不具合の原因になることが多いので^^;
自己解決されたとのことで、クローズしておきますね。
一覧の記事タイトルについては、ある程度長さを揃えるために途中で「切る」ようになっていまして、タグを含めちゃうと終了タグの前に「切っちゃう」みたいなことがありえるので、今のような仕様になっています。
子テーマの functions.php に下記のコードを追加いただくと、途中で切る機能がオフになり、HTML もエスケープされない（WP デフォルトの動作）になると思います。ちょっと試されてみてください！
add_filter( 'snow_monkey_entry_summary_title_num_words', function( $num_words ) {
return false;
} );
