GeneratePress テーマポストナビゲーションの順序とスタイルを変更する

Last Updated: 2024 年 10 月 04 日 2のコメント
無料電子ブック AdSense ウェビナー

WordPress GenetatePressテーマを使用している場合、 Blog セクションでポストナビゲーションを有効にすると、個々の投稿の下部に前の投稿と次の投稿のリンクが表示されます。 Previous Postは文字通り古い投稿（Older Post）エントリ、Next Postはより新しい投稿（次の投稿）エントリです。このPrevious PostとNext Postの順序を変更することは私にとってより自然なようで、CSSを使用してポストナビゲーションの前の記事と次の記事の項目の順序を変更し、ミミットしたデフォルトスタイルも変更しました。

次の記事では、次の内容について説明します。

  1. GeneratePress テーマでポストナビゲーションを設定する
  2. ポストナビゲーションに同じカテゴリ内のアイテムのみを表示させる方法
  3. 前の記事/次の記事項目の順序を変更する
  4. ポストナビゲーションスタイルの変更方法

GeneratePress テーマでポストナビゲーションを設定する

GeneratePress テーマの無料版では、以前の投稿/次の投稿リンクがデフォルトで表示されており、表示するかどうかを制御するオプションはありません。 GPプレミアム ユーザーは 外観（外観） » カスタム » Layout » Blog » Content » Single タブから Display Post Navigation (ポストナビゲーションを表示) オプションを有効または無効にして、前の投稿/次のリンクを表示または非表示にできます。

無料のGPテーマからポストナビゲーションを削除するには、次のカスタムCSSコードを 外観 » カスタム » 追加 CSSに追加します。

/* How to Hide Post Navigation in the GeneratePress Theme on WordPress */

.site-main .post-navigation {
    display: none;
}

基本的なCSSを理解すれば、他のテーマでも応用できるはずです。

ポストナビゲーションを有効にしてブログの一番下に前の投稿/次のリンクを表示すると、Webサイトの使いやすさとユーザーのエンゲージメントを向上させるのに役立ちます。また、コンテンツを論理的な順序で整理することで、ユーザーがさまざまな部分から成る記事やトピック別のシリーズに簡単に従うことができます。この構造化ナビゲーションは内部リンクを改善し、検索エンジンが他のコンテンツとの関係を理解するのに役立ちます。 SEO（検索エンジン最適化）でも有利に働くことができます。

前の記事/次の記事へのリンクを表示していない場合は、SEOを向上させるために表示することを検討してください。コンテンツの重複のために消極的かもしれませんが、ポストナビゲーションはコンテンツ全体と比較して無視できる分量であるため、問題にはなりません。

同じカテゴリ内で前の記事/次の記事を表示する

ポストナビゲーションの前の投稿/次の投稿項目を同じカテゴリ内の項目に制限したい場合があります。これにより、個々の記事の下部に同じカテゴリの記事が表示されるため、訪問者がクリックする可能性が高くなります。

GeneratePress テーマを使用している場合」Changing the output of nav-next & nav-previous （前の記事/次の記事項目の出力を変更する」記事に記載されているコード チャイルドテーマの関数ファイルに追加すると、同じカテゴリ内のアイテムが前の投稿/次のリンクとして表示されます。

add_filter( 'generate_category_post_navigation', '__return_true' );

ジェネレートプレスのテーマで前の投稿/次の投稿の順序を変更する

GeneratePress テーマのポストナビゲーションでは、前の投稿（Prevous Post）と次の投稿（Next Post）のリンクが上の図のように表示されます。

左側に最新の投稿（Newer Post）が、右側に古い投稿（Older Post）項目が表示されるのがもっと自然ではないかと思います。最新の記事ページの下部にページネーション（Pagination）が表示される場合、数字が小さいほど（左側に）最新の記事が表示されることに慣れており、私はジェネレートプレステーマのポストナビゲーションで前の投稿/次の投稿の順番がぎこちなく感じられます。 。

だから私は左に新しい記事（Newer Post）を、右に古い記事（Older Post）を表示するように変更しました。 GeneratePress フォーラムの記事Change the post navigation order…「ポストナビゲーションの順序を変更するコードが示されていますが、その記事のコードをテストしてみると、前の記事/次の記事リンク自体は変わらず、HTMLタグだけが変わるようです。

私はCSSへのポストナビゲーションの前の記事/次の記事項目の順序を変えました。 CSSコードの例 Naver カフェで確認できます。

💡GeneratePress テーマポストナビゲーションCSSスタイルの例

例1 スタイルのカスタムコードを追加すると、次のようにポストナビゲーションアイテムの順序が変わり、レイアウトスタイルも少し改善されます。

例2 スタイルのCSSコードを適用すると、 WordPress ブログのようにポストナビゲーションレイアウトが変更されます。 基本的なCSSを理解すれば簡単に応用できるはずです。

GeneratePress テーマはシンプルで高速でカスタマイズするのに良いテーマのようです。速い速度のために韓国で GeneratePress テーマが多用されています。初めて起動する場合 無料版使用しても大丈夫です。

同様のテーマで Astra, OceanWP などのテーマがあります。 GeneratePress よりスピード面では速くないが簡単にクオリティの高いブログやニュースサイトなどを作りたい場合 Newspaper テーマが良い選択であることがあります。

参照

2のコメント

コメント

    • 時間が経つにつれて、アストラテーマのポストナビゲーションを見て、どのように応用すればよいかについて一度取り上げてみましょう。基本的なCSSはそれほど難しくないので、ユビュブで勉強したり、本を購入して勉強することができるでしょう。

      https://cafe.naver.com/wphomepage/16730

      応答