投稿本文下にいつも決まったコンテンツを表示する方法

公開日: カスタマイズいろいろ

【スポンサーリンク】








この記事はに公開され、に最終更新されたもので、内容が古い可能性がありますのでご注意ください。

このサイトはココナラでWordpressに関するカスタマイズの依頼をお受けする手助けとして公開していますので、このページを含め、各投稿下にこのようなコンテンツを表示しています。
投稿本文下にいつも決まったコンテンツを表示する方法
※実際にこのページの下にも同じものが出ています。

ha-Basicテーマではあらかじめ本文下に何かを追加できるウィジェットエリアがあります。が、それはタグリストとSNSシェアバーの下へ本文とは別のコンテンツですよ!という感じの配置にしています。

でも、画像のような定型文はできれば本文の下に本文の続きのように表示したいものですよね?

今回はこれを実現する方法を紹介します。後半では後からコンテンツの修正などができるようにする方法も書いていますので一度すべての文章をお読みになってからどちらで対応するかを決めてください。

投稿本文下にいつも決まったコンテンツを表示する方法

1.表示するコンテンツを作る

まずは表示するコンテンツを作成します。Wordpressのエディタに慣れている方はちょっとハマるかも知れません。なぜかというと、Wordpressのエディタは自動整形機能と言って、段落タグなど本来htmlで書くべきタグを省いても勝手に?整形し直して表示してくれる機能が備わっているからです。残念ながらテーマに挿入するものはきちんとhtml形式になっていないとエラーが出ますのできちんと書くようにしましょう。

ちなみに上の画像のコンテンツはこのように書いています。

<h2>いつでもご相談・お見積りの依頼を受け付けています</h2>
<p>Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。</p>
<div align="center"><a href="https://profile.coconala.com/users/707043" target="blank"><img class="coconala-ph" src="https://momosiri.com/wp-content/uploads/2019/05/coconara.png" alt="" width="728" height="90" /></a></div>
<p>※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。<a href="https://px.a8.net/svt/ejp?a8mat=2ZVTDT+CL3ASQ+2PEO+1HL85U" target="_blank" rel="nofollow noopener">こちら</a><img src="https://www13.a8.net/0.gif?a8mat=2ZVTDT+CL3ASQ+2PEO+1HL85U" alt="" width="1" height="1" border="0" />から登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。<p>
<hr />

もちろんこんな普通のhtml定型文ではなく、PHPコードやPHP稼働させるようにしたショートコードなども含めることができます。

2.定型文(コンテンツ)を挿入する

管理画面から「外観」→「テーマ編集」を開きます

右側にある一覧の一番下あたりにある「個別投稿 single.php」をクリックします。

コードがずらっと並んでますが、33行目あたりに「<?php the_content(); ?>」というコードがありますので発見してください
※これが投稿編集画面に入力した「本文」の内容を出力するためのコードになります

これの下に定型文を入れたいわけですから、1で作成した定型文を「<?php the_content(); ?>」の下に挿入して保存すれば、どの記事にも表示されるコンテンツの完成です。

きちんとhtmlやphpの構文が完成していない場合には保存時にエラーが出ることがあります。昔のWordpressでは間違ったコードを書くと即座に動作停止、画面真っ白になったのですが、現在のバージョンではこうしてコードチェックをしてくれます(個人的には大変重宝しています)。

コードは合ってるのに・・という場合にはコードの先頭や末尾、途中に全角スペースなどが入っていることがほとんどですのでチェックしてみてください。

たったこれだけで簡単に定型文の挿入ができます。なんだか少しテーマを操ることができた感じがして気分いいですね!!有料テーマなどではこうした処理の繰り返しがたくさん書かれていてファイルも細分化されていますから、このテーマでいろいろカスタマイズして感覚をつかむのも大事かもしれません。習うよりも慣れろ!!です(余談でした)

逆にこれだけシンプルな構造なのでカスタマイズもシンプル!!なのがha-Basic最大の魅力だと思います(自画自賛です)。

ちよっと一工夫 直接single.phpへ挿入しなくてもいいようにするには

single.phpへ直接何かを記述するのは怖い、後々変更できるようにしておきたいというケースもあると思います。

そんなときには以下のようにしておくと要件を満たすことができるようになります。2手順なので簡単にカスタマイズできますよ。

1.読み込むコンテンツを格納するファイルを用意する

まずは表示するコンテンツを書く場所を用意します。と言ってもphpファイルを1つ作成してテーマディレクトリへアップロードするだけです。

メモ帳(できれば無料でも秀逸なTeraPadなどを使いましょう)を開き、何も書かずに

a-insert-undercontent.php

というファイル名で保存します(.phpは拡張子ですので保存時に指定してください)

保存したファイルをFTPクライアントなどを使ってテーマのディレクトリへアップロードしておきます。

テーマディレクトリの場所??は
Wordpressのインストールフォルダ→「wp-content」→「themes」→「ha-basic」フォルダの中です
何でa-を付けるの??と不思議に思うかも知れませんね。簡単に言うと、テーマエディタを開いたとき右側に表示されるメニューの並び順がAtoZ(昇順)なので、できるだけ上に表示されるようにしたい・・・ただそれだけです(笑)

管理画面の「外観」→「テーマの編集(場合によってはテーマエディタと書かれていることもあります)」を開き、「a-insert-undercontent.php」というファイルが画面右の一覧にあれば準備完了です。
※表示されない場合には一度テーマ編集画面をリロードしてみてください

2.single.phpへ1を読み込むようにする

テーマ編集画面にある右側の一覧から「個別投稿 single.php」をクリックしてください

冒頭で紹介した方法でコンテンツを記述した場所(「<?php the_content(); ?>」というコードの下)へコンテンツの代わりに以下のコードを追加して保存します。

<?php get_template_part('a-insert-undercontent');//本文下追加コンテンツ?>

これで、投稿が表示されると自動的に「a-insert-undercontent.php」に書かれたコンテンツが表示されるようになります。

実用的にはこの方が堅実な方法かも知れませんね。

もしもカテゴリーによって、タグによって・・・で表示する/しないを切り替えたい場合にはbody classタグで判断して表示するような条件分岐を「a-insert-undercontent.php」に書いたコンテンツへ仕込めばOKです。

※条件分岐についてはちょっと知識が必要なのでここでは紹介していません。基本的な使い方はこちらの記事を参照ください。


いかがでしたか??こうしたちょこっとカスタマイズをしていくことで、テーマ編集に対するアレルギーが少しずつなくなっていけば幸いです。

これも余談になりますが、たったこれだけのことをわざわざウィジェットエリアを追加して表示させたり、何かのプラグインを使って挿入したりすることで今回の方法よりも少なからず表示速度に悪影響が出ます。なんでもプラグインで機能が追加できるのがWordpress最大の利点でもあり、こうした機能が充実している有料テーマなどを使うのも方法の1つだとは思いますが、できれば一度自身で何とかできないか?という工夫をしてみると結果的に訪問者を待たせないサイトが作れると思いますから頑張ってみてください。

いつでもご相談・お見積りの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。