完全な投稿ではないホームページにWordPressの投稿の抜粋を表示する方法

公開: 2017-01-11

このチュートリアルでは、WordPressのフロントページに抜粋を表示する方法を説明しますか?

通常、WordPressテーマは、ブログのフロントページに投稿全体を表示します。 ブログの投稿が長い場合、これは読者や訪問者にとって疲れる経験になる可能性があります。

読者がすべての記事をすばやく表示することは非常に困難で苦痛になります。 読者は、2番目、3番目、およびその他のブログ投稿を表示するために下にスクロールする必要があります。

WordPressでは、ホームページに投稿の抜粋を表示することもできます。 WordPressの抜粋は、ブログ投稿のオプションの要約または説明です。 要するに、WordPressの抜粋は投稿の要約です。

ダッシュボード›設定›読み取りで要約を表示するオプションが選択されている場合、WordPressの抜粋でRSSフィードのコンテンツ全体を置き換えることもできます。

テーマがサポートされている場合、抜粋は、タグ、カテゴリ、月次または著者のアーカイブ、検索結果ページなどのさまざまなページに表示できます。 完全なコンテンツよりも簡単な要約の方が望ましい場合。

WordPressの投稿の抜粋を使用すると、コンテンツをナビゲートしやすくすることができます。 完全なブログ投稿コンテンツの代わりに、WordPressで投稿の概要を表示する方法はたくさんあります。 このチュートリアルでは、すべての方法について説明します。

  • より多くのタグを使用する
  • マニュアルの抜粋を書く
  • 自動投稿抜粋:WordPressテーマをカスタマイズする

その他のタグを使用してホームページに投稿の概要を表示する方法

タグを追加すると、ブログ投稿の最初の抜粋を表示できるため、読者は「続きを読む」タグをクリックして投稿全体に移動できます。

タグを追加するのは非常に簡単で簡単ですが、私は自動投稿の抜粋を使用することを好みます。 新しいブログ投稿を書くたびにタグを追加する必要はありません。

WordPress moreタグを使用すると、ブログ投稿の最初の段落を表示できます。 投稿のどこにでもリンクを追加して、好きなようにカスタマイズできます。

新しい投稿を書くか、既存のブログを編集してください。 投稿が完了したら、ブログ投稿のどこにでもリンクを追加できます。

MoreTagを表示するブログ投稿の場所にカーソルを置きます。 ビジュアルエディターのツールバーで、をクリックします。 「続きを読むタグを挿入」 ボタンをクリックし、HTMLエディタを使用している場合は、 もっとボタン。 最初の行に[その他のタグ]ボタンがあります。

ビジュアルエディターを使用している場合は、WordPressビジュアルエディターを使用してタグを追加する方法を以下のスクリーンショットで確認できます。

使用方法続きを読むタグWordPress投稿の抜粋
続きを読むタグの使用方法– WordPress.com

それで全部です。 クリックすると、投稿に分割が表示されます。 これで、ブログ投稿に続きを読むリンクが正常に追加されました。 これで、「続きを読むタグ」の前のコンテンツのみがブログのホームページとアーカイブページに表示されます。

WordPressでマニュアルの抜粋を書く方法

前に説明したように、WordPressの投稿の抜粋は、ブログ投稿のオプションの手作りの要約です。 WordPressの投稿の抜粋は、ブログの投稿を短縮するために使用されます。これにより、ブログの投稿全体ではなく、ブログの投稿のごく一部(通常は投稿の紹介または要約)のみがホームページに表示されます。

justlearnwpホームページでは、投稿の抜粋を実際に見ることができます。 一部のブログ投稿では、抜粋を手動で記述し、一部の投稿では、[続きを読む]リンクを使用した自動投稿抜粋を使用します。

WordPressの投稿の抜粋を手動で有効にする
WordPressの投稿の抜粋を手動で有効にする

ブログ投稿を書くときは、右上隅にある[画面オプション]をクリックして、[ 抜粋チェックボックス。 投稿のすぐ下に、新しい抜粋モジュールが表示されます。 ここで、この抜粋モジュールにブログ投稿の簡単な要約を書き込むだけで、ブログ投稿が完了したら、[公開]ボタンをクリックできます。

それで全部です。 シンプルで簡単。

WordPress自動投稿の抜粋:WordPressテーマをカスタマイズする

現在、この方法は初心者にとってより技術的で難しい方法です。 WordPressテーマの開発、HTML、CSS、PHP、およびWordPressテーマファイルの編集方法について何も知らない場合。 ライブサイトでテーマファイルを編集しようとしないでください。

あなたはあなたのサイトを壊すことができます。 この方法を試したい場合は、開発目的でローカルのWordPress開発サイトをセットアップする必要があります。ローカルのWordPressサイトを使用すると、好きなように試すことができます。 何か問題が発生した場合でも、いつでも簡単に新しいテストサイトを設定できるからです。

WordPressのローカル開発セットアップに関するチュートリアルはすでに公開されています。

  • Windows8のWAMPサーバーにWordPressをインストールする方法
  • BitnamiStackを使用してWindows8にWordPressをインストールする方法

自動WordPress投稿の抜粋の場合、WordPressテーマファイルを編集する必要があります。 テーマによって異なる場合は、どのファイルを編集する必要がありますか。 ほとんどの場合、 content.phpまたはindex.phpファイルを編集する必要があります。

Twenty SixteenWordPressテーマまたは_SWordPressスターターテーマに基づくテーマを使用している場合は、 content.phpファイルを編集する必要があります。

WordPressテーマファイルをカスタマイズする場合は、常にWordPress子テーマを作成することをお勧めします。 私は26の子テーマを使用しています。

子テーマフォルダーに、 content.phpファイルを含む新しいフォルダーtemplate-partsを作成しました。 次に、 content.phpファイルで次の行を見つけます

<div class="entry-content"> <?php

上記の行のすぐ下に、次の条件文を追加します。

 if ( is_home () || is_category() || is_archive() ) { the_excerpt(''); } else {

単純なWordPressでは、WordPressに指示する上記のステートメントでは、ホームページ、カテゴリ、アーカイブページに完全なコンテンツを表示しないでください。 これで、WordPressは自動投稿の抜粋を作成して表示します。 抜粋を作成するのを忘れたとしても、WordPressはブログ投稿の最初の55語を表示します。

次に、ifステートメントの終了タグを追加する必要があります。追加しないと、WordPressに空白の画面が表示されます。 content.phpファイルで次の行を検索します

?> </div><!-- .entry-content -->

これらの終了タグの直前に} // end of if statements追加します。 コードは次のようになります。

 } // end of if statements ?> </div><!-- .entry-content -->

content.phpファイルを保存し、ブログのフロントページをリロードします。 ブログ投稿全体ではなく、ホームページにのみ投稿の抜粋が表示されます。

空白の画面またはPHPエラーが表示された場合は、コードをチェックして、コードが正しいことを確認してください。

抜粋の下にリンクを追加して投稿全体に追加する方法

ブログ投稿の下に抜粋が表示されている場合は、すばらしいです。 次に、続きを読むリンクを追加しましょう。 自動抜粋機能を使用する場合、WordPressは投稿全体を含むページへのリンクを自動的に提供しないためです。

リンクを生成するには、functions.phpファイルに次のコードを追加します。

 function new_excerpt_more( $more ) { return ' <a class="read-more" href="'. get_permalink( get_the_ID() ) . '">' . __('Read More', 'your-text-domain') . '</a>'; } add_filter( 'excerpt_more', 'new_excerpt_more' );

関連性のあるコンテンツ

  • ビデオ:WordPress関数プラグインを作成する方法とFunctions.Phpファイルを使用するよりも優れている理由
  • ビデオ:WordPressの関数PHPファイルとは何ですか?それを編集する方法は?

フィルタを使用してWordPressの自動抜粋の長さを制御する方法

デフォルトでは、WordPressの抜粋の長さは55ワードに設定されています。 excerpt_lengthを使用してWordPress自動抜粋の長さを変更することもできます。

excerpt_lengthフィルターを使用して抜粋の長さを20ワードに変更するには、テーマのfunctions.phpファイルに次のコードを追加するだけです。

 //Filter the except length to 20 characters. function wpdocs_custom_excerpt_length( $length ) { return 20; } add_filter( 'excerpt_length', 'wpdocs_custom_excerpt_length', 999 );

ここに私のテーマのスクリーンショットを見ることができます。

WordPress自動抜粋長チュートリアル
WordPress自動抜粋長チュートリアルはテーマファイルを編集する必要があります

投稿の抜粋を表示する11の無料のWordPressプラグイン

WordPressの投稿の抜粋を使用するさまざまな方法を説明しました。 無料のWordPress投稿抜粋プラグインを使用することもできます。 これがWordPressの投稿抜粋プラグインのリストです。 すべてのプラグインは無料で、一部の開発者はプレミアムバージョンも提供しています。

  1. Advanced Excerpt :90000以上のインストールで、Advance Excerptが最も人気があり、WordPressの投稿抜粋プラグインです。 このプラグインを使用すると、WordPressの投稿の抜粋の外観を簡単に制御できます。

  2. 簡単なカスタム自動抜粋:自宅、検索、アーカイブでの投稿の投稿抜粋を自動的に生成します。 [続きを読む]ボタンとサムネイル画像をカスタマイズすることもできます。

  3. スクロール投稿の抜粋:スクロール投稿の抜粋WordPressプラグインは、ウェブサイトに情報リールを作成します。このスクローラーには、投稿のタイトルと投稿の抜粋が含まれています。

  4. 続きを読む抜粋リンク:省略記号の代わりに、抜粋の後に「続きを読む」リンクを作成できます[…]抜粋の長さも変更します。

  5. Get Better Excerpt :最新のWordPress投稿抜粋プラグインです。 Get Better Excerptプラグインは、既存の関数のように抜粋を切り取るのではなく、単語全体を返すことを除いて、組み込みのget_the_excerpt()およびthe_excerpt()関数とほぼ同じように機能します。

  6. Easier Excerpts:新しいWordPress投稿抜粋プラグインです。 コンテンツの長さに合わせて、抜粋フィールドのサイズを自動的に変更します。

  7. ストアフロントブログの抜粋:アーカイブページの投稿コンテンツ領域を変更して、完全なコンテンツではなく抜粋を表示できるようにします。

  8. StripTease :この無料の投稿抜粋プラグインを使用すると、続きを読むティーザーリンクの最後から#moreフラグメントを削除して、完全な投稿にリンクすることができます。

  9. リッチテキストの抜粋:WordPressプラグインを使用すると、それらをサポートする任意の投稿タイプの抜粋でリッチテキストを編集できます。

  10. 最初の投稿の完全な長さ:このプラグインは最初の投稿を全文で表示しますが、他のすべての投稿は「more」タグの後のテキストで表示します

  11. WP抜粋設定:このプラグインを使用すると、UI(ユーザーインターフェイス)を介してWordPress抜粋を構成できます。

最後の言葉

このチュートリアルでは、WordPressの投稿の抜粋を表示するさまざまな方法を説明しました。 覚えておいてくださいwordpress.comがホストするブログを使用している場合、WordPressテーマファイルを編集することはできません。 ただし、抜粋モジュールを使用して、続きを読むリンクを簡単に追加したり、抜粋を書き込んだりできます。

1番目と2番目の方法はシンプルでわかりやすく、Automatticの抜粋後の方法はより技術的な読者向けです。 私は今あなたがプロのようにWordPressの抜粋を使うことができることを願っています。

WordPress投稿の抜粋:リソースと参考資料

WordPressPostの抜粋についてさらに学ぶためのリソースがいくつかあります。

  • StackExchangeのスレッドの抜粋でHTMLを許可する
  • WordPressコーデックスのWordPress抜粋公式ドキュメント
  • the_excerpt関数WordPressコードリファレンス
  • WordPress More Tag:WordPress.comサポートで完全なチュートリアルを読む