HOME → 3 WordPress → 03 カスタマイズ → 

関連記事の表示が編集できる WordPress Related Posts の導入

関連記事が簡単に表示できるWordPressプラグイン
WordPress Related Posts を利用
なんとこのプラグインは、関連記事の表示が編集できる!!!
 

自分で選定した記事を、関連記事として表示させたくて、プラグインなし 手で 作成してみたが、表示における位置や、サムネイルと概要の配置がうまく行かず、結局プラグインを使用することになった。

WordPress Related Posts は、
関連記事の選択・表示順序の変更が可能
 

 

スポンサー リンク

 

 
 
1. WordPress Related Posts プラグインの利用例。
 
WordPress Related Posts のインストールと有効化。
wprp112
 
Dismiss and go to setting へをクリック。
wprp122
 
Emailを入力すると、アップデートの情報やニュースレターが送られて来るらしい。関連記事の表示タイトルと、表示個数を入力。10個表示することにした。
wprp133
 
Advance settings を開き、表示レイアウトを決定する。関連記事のサムネイルを表示するにチェックを入れ、記事の抜粋文を 70文字 表示する事にした。
wprp142
 
次に、記事に画像がない場合に表示するディファルトの画像を指定し、関連記事の表示から除外するカテゴリーにチェックを入れ、自動的に関連記事を表示するにチェックを入れ、保存して完了。
wprp152
 
次のように、記事のすぐ下に表示されるようになった。
wprp162
 
このプラグインの良さは、管理者ユーザーでログインしている状態で、記事にアクセスすれば、関連記事の編集ボタンが表示される点だ。
wprp172
 
編集ボタンをクリックすると、表示する関連記事が直接指定でき、表示順序も変更できる。これで、関連記事の精度が悪いと感じた時、自分で修正することができる。wprp182
 
この機能があると最初から分かっていれば、下記のような苦労はせずに済んだのに・・・。
 
 
2. プラグインなしで作成し、失敗した事例。
 
プラグインなし 手で 作成した 手順(表示がうまく行かず、諦める
 
 
1. テーマの関数(functions.php)に、サムネイルサイズを追加。
 
アイキャッチ画像を有効にする記述
add_theme_support('post-thumbnails');
は、既にあったので、
作成するサムネイルのサイズを指定する
add_image_size('thumb100',100,100,true);
のみ追加。
functions-php112
 

2. サムネイルの再作成。
 
アイキャッチ画像が、サムネイルとして表示されることになるので、Regenerate Thumbnails というプラグインをインストールし、アップロード済みの全画像からサムネイルを再作成。regenthum112
 
インストールすると、ツールバーに Regen Thumbnails が現れる。
regenthum122
 
すべてのサムネイルを再生成する。
regenthum132
 
719個画像があり、1時間30分近く掛かった。
regenthum142
 

3. 関連記事抽出プログラムを作る。
 
related-article.php という名前(好きな名前でよい)で作成し、wordpress のディレクトリー wp-content.themes.twentysixteen 直下にアップロードする。この後は、ダッシュボードの『外観』→『テーマの編集』で編集可能となる。
related-article112
 

4. スタイルシート(style.css)の編集
 
style.cssの最後辺りに、 関連記事表示用のスタイルを記述。
style-css112
 

5. 個別投稿(single.php)への『関連記事』表示コードの追加。
 
single.php の関連記事を挿入したい場所に、related-article.php を呼び出すコードを追記。
singl-php112

6. no-image.png を用意する。
 
記事に画像がない場合に表示するディファルトの画像を、ディレクトリー wp-content.themes.twentysixteen 直下にアップロードする。

7. 記事に、アイキャッチ画像を設定する。
 
個々の記事にアイキャッチ画像が設定されていなければ、設定する。
 

以上。
(2016.11.12)

 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください