コクーン(cocoon)のテーマを利用していて、最初の見出しの前に、広告や定型文(プロフィール情報)を入れたい…と思った事はありませんか？
この記事の通りやれば、最初の見出しの前に、広告や定型文(プロフィール情報)を詳しい手順を解説しますので、スムーズに最初の見出しの前に好きな広告や定型文を加える事が可能です。
他のテーマでもh2直前 などのウィジェットが無い時、手動で投稿するのは面倒臭いですよね？
- JINR
- コクーン(cocoon)
- SWEL
などのテーマでは 最初の見出し２の上部に自動で差し込めるウィジェットが無いんです。
ショートコードを使えば挿入する事も可能なのですが…毎回だるくてやってられません。
一度設定した 「記事を書いた人のプロフィール」の挿入位置は、記事の最初の見出しがベストです。
この記事では、cocoon(コクーン)を含むウィジェットに 見出しの前のフリースペースがない場合に、簡単に見出しの前後などに 好きなコンテンツを加えられる方法を解説します！
見出しの前後に自動挿入！定型文、広告やプロフィールを入れる方法
- プラグインをインストールする。
- プラグインを設定する。
これだけの作業です。
Ad Inserter プラグインを挿入する。
ここで利用するのは、Ad Inserter というプラグインです。
ワードプレスでプラグインを新規追加してください。
僕のこのブログでも使用しています＾＾
これです。間違えないように…＾＾；
Ad Inserter 使い方
インストールするとサイドメニューの設定に進むと、Ad Inserter が表示されます。
すると下記のような画面になります。
今回は「最初の見出２の前」としていきます。
表示させたいソースを貼り付ける。
画面の黒い部分に挿入した内容が指定の場所に反映されます。
基本的にはHTMLとなりますので、一度 新規追加で投稿ページを開いて、挿入させたいコンテンツを作成して、HTML表示にしてコピーすればOKです。
ブロックエディタの場合でも、プロフィールを入れたい場合、一旦挿入した後で、下記のようにブロックのメニューから、HTML編集をクリックすればHTML形式になります。
この通り。
これをコピーして黒い部分に貼り付けます。
下記はLINEのバナーもHTMLで挿入してますが、同じように投稿画面で挿入したいコンテンツを作成したら投稿せずにHTMLのみを抽出しましょう。
ビジュアルエディタで編集するには
ビジュアルエディタでも編集可能です。
その場合は下記の手順でエディタを開けます。
入力後はこちらをタップします。
すると下記のようにHTML形式で挿入されます。
一先ずこれで表示させたいコンテンツは決まりましたね！
Ad Inserter表示させる場所を指定する方法
次に表示させる場所ですが、「h2の見出しの前」にする場合、一番正確なのは、 HTML要素前 です。
JINRの場合はこれで良いんですけど、
テーマによるので こちらのセレクターを使って指定します。
ここをクリックすると自分のワードプレスサイトが表示されます。
そのまま、記事ページに進みます。
そして 記事中の 見出し２の部分をクリックします。
そうすると セレクタ部分にソースが表示されます。
article#post-1 > div > h2 と記載がありますね！
このまま、今度は、使用のボタンをクリックします。
これで完成です。
投稿ページの、見出し２の前に表示する という設定が完了です。
とくにこれ以外は操作する事はありません。
応用
応用として見出しの後に表示したい場合は、HTML要素前から HTML要素後に変更します。
最後は設定を保存するをクリックするだけです。
これで完了です。
見出しなどの指定位置に表示したい場合は、セレクタの指定で簡単に行えます。
固定ページの場合
固定ページで同じように使いたい場合には、この方法は使えませんが固定ページの数は一般的に多くないと思うので手動で入力してください。
それでは今回はこの辺で…。
他にもコクーンのカスタマイズ系の記事色々書いてますー
