きょうは嬉しいことがありました。ブログのカスタマイズのことです。
記事の下にソーシャルリンクを設置して、その下に関連記事を表示する方法がわかったんです。
コレずーっとやりたかったんですけど、ネットに載っている一般的な方法だとできなくて悩んでいたんです。
それがやっとできたー!
順を追って書いていきますね。
ソーシャルリンクと関連記事
ブログを運営していると、記事の下にフェイスブックやツイッターなどへの「ソーシャルリンクのボタン」や、「関連記事へのリンク」を表示させたくなります。
プラグインを使えば簡単
これらは、ワードプレスの場合、プラグインを使うと簡単に表示できます。
ソーシャルリンクのプラグイン
たとえば、ソーシャルリンクのボタンを表示するプラグインは「WP Social Bookmarking Light」です。(ほかにもあると思います)
関連記事のプラグイン
それから、関連記事へのリンクを表示するプラグインは「WordPress Related Posts」です。(これも、ほかにもあると思います)
表示の順番を変えたい
問題は、表示の順番です。
これらのプラグインをインストールして有効化すると、記事の下に表示される位置関係は、
上から、
関連記事
↓
ソーシャルリンク
の順番になります。
関連記事が上で、ソーシャルリンクが下なんです。
ソーシャルリンクを上にしたい
ぼくはこれを逆にしたかったんです。
上から、
ソーシャルリンク
↓
関連記事
の順番に表示させたかったんです。
ふつうはsingle.phpをいじる
いろいろ調べたところ、一般的には次の手順でできるようでした。
1.ワードプレス管理画面にログインする。
2.「外観」⇒「テーマの編集」⇒「単一記事の投稿(single.php)」
3.単一記事のソースを表示
4.それをゴニョゴニョいじる。
でもぼくの場合はできませんでした。
テーマTwenty Fifteenの場合は違う
ぼくはTwenty Fifteenというテーマ(ワードプレスのデザインの種類)を使っています。
このテーマだと「単一記事の投稿(single.php)」のソースを開いてみても、ネットで説明されているのとは内容がなんだか違っていて、うまくいきませんでした。
content.phpをいじるらしい
あれこれ試行錯誤しました。
すると、どうやらTwenty Fifteenの場合は、「単一記事の投稿(single.php)」ではなく「content.php」をいじれば良いらしいんです。
やり方
ぼく自身が忘れっぽいので、のちのちのためにメモしておきます。(この記事をお読みのみなさまは自己責任でお願いします)
準備
まず前提として、ソーシャルボタンのプラグイン「WP Social Bookmarking Light」と、関連記事のプラグイン「WordPress Related Posts」が有効化されているものとします。
まだの場合は、「プラグイン」の「新規追加」から検索してインストールし、有効化します。
有効化されると、記事の下に関連記事が表示され、さらにその下にソーシャルボタンが表示されます。
さあ、いよいよこれを逆にします。
手順はつぎの通りです。
ソーシャルリンクの下に関連記事を表示する方法
1.ワードプレス管理画面のメニューから「設定」⇒「WordPress Related Posts」をクリックします。
2.「Advanced settings」の右の▼をクリックします。隠れていたメニューが出てきます。
3.Auto Insert Related Posts (or add<!–?php wp_related_posts()?–>to your single post template)のチェックマークをはずします。これをはずすと、関連記事の場所を動かせるみたいです。
4.ページの下のほうにある「Save Changes」をクリックします。これで変更が保存されます。
5.さっきチェックをはずした項目の「<!–?php wp_related_posts()?–>」の部分をコピーします。これをソースの適切な場所に貼りつければ、そこに関連記事が表示されるようになります。
※このページからコピーしてもうまくいきません。ご自分の画面でコピーしてください。
いまコピーしたものをどこに貼りつけるかというと…。
6.ワードプレス管理画面のメニューから「外観」⇒「テーマの編集」をクリックします。
7.画面右のテンプレートから「content.php」をクリックします。
8.content.phpのソースが表示されます。
9.ソースの、</div><!– .entry-content –>の上の行に、さっきコピーした<!–?php wp_related_posts()?–>を貼り付けます。
10.「ファイルを更新」をクリックします。
完了です。
ぼくの場合はこれでうまくいきました。