[キタジマ タカシ]

念のためご確認なのですが、この記事だけじゃなく、他の記事でも同様の現象でしょうか？

一応、今の仕様は、次の順番で空だったら次のものが…というデータの利用のされ方をします。

og:description
SEO Meta description → 抜粋 → 本文

一覧での抜粋表示
抜粋 → 本文

こちらでテストしてみているのですが、og:description についてはちゃんと SEO Meta description が優先利用されていまして、もしかしたら他のプラグインの影響や、設定の組み合わせで何か想定外の不具合があったりするのかなぁと想像しています（もし子テーマの functions.php で何らかカスタマイズされているのであれば、そこから何か影響が、ということも無くはないかもしれません）。

もし可能であればテーマを子テーマじゃなく Snow Monkey に一時的に変更していただき、プラグインも全て停止、それで正しく og:description がでるかどうか、それでもダメなら可能でしたらちょっとサイトにログインさせてもらって調査させてもらえば何かわかるかも…という感じです。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

わお、そうなんですね(@@
調査しますのでしばしお待ちください…。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

や、すでにそうなってるかも！

各記事の編集画面の下のほうに SEO というメタボックスがあって、その中に Meta description という入力項目があるのですが、そこに入力したものが記事の og:description として使用される

こちら、ちょっと試してみてください！

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

あ、なるほど、一覧ページじゃなくて各記事の og:description ということですね。一覧に表示されている各記事の抜粋と、実際の各記事の og:description は似てるけどちょっと違う（表現が難しくてうまくつたえきれませんが。。）ので、もうちょっと別なコードが最適かもしれません。

えと、各記事の編集画面の下のほうに SEO というメタボックスがあって、その中に Meta description という入力項目があるのですが、そこに入力したものが記事の og:description として使用される、という感じで大丈夫でしょうか？

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

調査したところ、Check Copy Contents が the_content() 部分を改変するのが原因でした。目次だけでなく、デフォルトの見出しのデザインや余白なども全部抜けてしまうようです。

子テーマを作成し、子テーマの functions.php に下記のコードを追加してみてください。

if ( class_exists( 'CheckCopyContents' ) ) {
	add_filter( 'the_content', function( $content ) {
		return str_replace( '<div class="theContentWrap-ccc">', '<div class="theContentWrap-ccc c-entry__content">', $content );
	}, 9999 );
}

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

子テーマの作成が必要ですが可能です。子テーマを作成し、子テーマの 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 ファイルを作成し、それぞれそこに記述するほうが先々の管理を本当は考えると良いかもしれません…。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

記事を一覧表示する際に

これはブログのトップページということでしょうか？

今は、例えばブログトップページなら「ダッシュボード > 設定 > 一般 > キャッチフレーズ」に入力したものが 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;
}

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

そうですね、これまでよりは難しくなると思います。まだ日本語での開発情報はあまりないのもあります…。

ウィジェットは僕が試したときは WordPress のデフォルトウィジェットが全部使えるわけじゃなくて一部だったので、Gutenberg 用に作る必要があるのかなと考えていましたが、今は Elementor みたいにどのウィジェットも普通に使える感じでしょうか？どうやって対応させるかも僕はまだ情報を見たことがないので、情報がでてこないとちょっと僕のスキルでは難しいかなという気はしています。

ぼちぼち進めていきたいとは思ってますので、気長にお待ちいただければと思います^^;

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

子テーマでテンプレートを上書きすると、親テーマ（ここでは Snow Monkey ですね）のアップデートが子テーマに反映されないという問題がどうしても発生します。

子テーマでテンプレート上書きすればアップデートしても大丈夫っていうけど本当にそう言い切って良いのか？

この記事は Habakiri Advent Calendar 2015 4日目の記事です。Habakiri とは少しそれますが、Habakiri が子テーマ前提のテーマということで、今回は子テーマに関する記事…

habakiri.2inc.org

そのため、親テーマでは「いかに最小単位で必要な部分だけを子テーマで上書きできるようにするか」というのが大事になってくるのですが、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' );
    }
} );

---

多分これを読んでも初見ではなかなか慣れなくて難しいと思いますので、ちょっと試されてみて、またご質問いただければと思います（慣れればこのような構成にしている利点が見えてくると思います…！）

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

やらねばやらねばと思いながら後回しにしていましたが、ぼちぼちやり始めないといけませんね。
多分今のままだと HTML コンポーネント挿入ボタンが表示されなくなってしまうので、ボタンが出せればボタンをだすようにするか、もしくは Gutenberg のブロックとして再実装するかで考えています。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

v4.0 で対応しましたのでクローズします！

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

v4.0 で対応しましたのでクローズします！

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

v4.0 で対応しましたのでクローズします！

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

v4.0 で対応しましたのでクローズします！

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

v4.0 で対応しましたのでクローズします！

♥ 0

いいねをした人: 居ません

[投稿者]

投稿