Word Press 雑記

【Word Press ワードプレス小技】Table of Contents Plus(TOC+)見出タグの直前に自動でアイキャッチ画像を挿入するよ

投稿日:

 

全ての記事でアイキャッチ画像の位置を変えたい時必見です!

 

こんにちは。

キャプテン翔太です。

ブログ活動をしているときに、アイキャッチ画像を記事に挿入する時があると思います。

そして、挿入位置については各ブロガー様によって様々だと思います。

私のブログにおいても、アイキャッチ画像の挿入作業を実施しました。

ですから、記事に残しておきたいと思います。

 

○この記事を読む事で以下の事が理解出来ます。

・(TOC+)見出タグの直前に広告ウィジットを設置するタグ
・アイキャッチ画像を表示するショートコード
・上記を組み合わせて、見出タグの直前に自動でアイキャッチ画像を挿入

上に通りなんですが、この記事でも自動的にアイキャッチ画像が見出タグの上に表示されます。

↓こんな風に。

 






 

記事単位でアイキャッチ画像を挿入しない理由

そもそも、アイキャッチ画像を記事の中に挿入していなかったんです。

ブログ師匠から「アイキャッチ画像は記事の中に挿入するのじゃ」とご教授頂きました。

 

もう既に、記事はたくさん書いていました。

ですから、私は効率的に記事中にアイキャッチ画像を入れる方法を探しました。

関連画像

 

すべての記事で位置を変更したいとき困る

例えば、各記事を一つ一つ、アイキャッチ画像の挿入を手動で実施したとします。

こうすると、例えば数年後に、すべての記事でアイキャッチ画像の位置を変更したいと思った時。

「また、全記事編集していくのか…」

という事態に陥ります。

「超残業 フリー」の画像検索結果

 

投稿時のアイキャッチ画像を変更するだけでOK

そこで思いついたのは、.phpをいじって記事に自動挿入出来ないか?

というものでした。

こうする事で、画像自体は、記事の投稿時に設定するだけです。

あとは、自動的に記事のどの位置に挿入されるかは、.phpをいじるだけで済むと考えたのです。

「ひらめき フリー」の画像検索結果

 

Easy Table of Contents(TOC+)で目次を自動生成していた

自動的に目次の直前に挿入するのはいいけども、目次自体がプラグインでした。

自動的に見出しを目次にしてくれるプラグインEasy Table of Contents

自動的に見出しを目次にしてくれるプラグインEasy Table of Contents

上記ブログ様でも紹介しているプラグインを利用して本ブログは運営しています。

このTOC+タグの直前に、自動でアイキャッチ画像を表示する必要があるのです。

「自動 フリー」の画像検索結果

 

二つの有益な記事を発見

そして、ワードプレスの用語が全然わからない私は検索しまくりました。

すると、とても有益な情報を記載しているブログ様に巡りあえたのです。

 

ラボラジアン -ICTリテラシーと Web技術の情報サイト-

【WordPress】Table of Contents Plus が生成した目次の直前に、ウィジェット(広告など)を表示するコードを自分で書く

【WordPress】Table of Contents Plus が生成した目次の直前に、ウィジェット(広告など)を表示するコードを自分で書く

このブログ記事で学んだのは、タイトルの通りです。

 

functions.phpを編集して、ウィジットを編集するだけで、広告などの任意の情報を目次の直前に挿入できるというもの。

 

やりたい事はこれで途中まで完成しました。

あとは、このウィジットにアイキャッチ画像のコードを入れるだけだと考えたのです。

 

【WEB TIPS】

コピペで簡単!アイキャッチ画像を表示するショートコード【ワードプレス】

コピペで簡単!アイキャッチ画像を表示するショートコード【ワードプレス】

見つけました。

 

初めは「アイキャッチ画像 HTML」などの全然見当違いなキーワードで検索してました。

 

全然、見つからない時間を過ごして諦めていた時。

 

「自分だったらどんな記事タイトルにするかな?」と考え「コピペ アイキャッチ画像 表示」で検索しました。

そして、上記ブログ様を発見する事が出来たのです。

「google」の画像検索結果

 

二つの記事を組み合わせると目的が達成できた

それでは、さっそく二つのブログ様に記載されていたテクニックを複合していきましょう。

そうすれば「目次の直前にアイキャッチ画像を自動的に表示」する事が出来ます。

 

functions.phpを編集する

1.「外観」⇒「テーマの編集」⇒「functions.php」を表示してください。

 

2.以下のタグをコピペします。

// 専用のサイドバーを用意する
register_sidebars( 1,
  array(
    'name'=>'目次上',
    'id' => 'widget-above-toc',
    'description' => '目次の上に表示されるウイジェット。',
    'before_widget' => '<div id="%1$s" class="widget-above-toc %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<div class="widget-above-toc-title">',
    'after_title' => '</div>',
  )
);
 

/**
 * 記事内の目次の上にサイドバーを追加する処理
 * 目次がなければ、記事の先頭に追加する。
 */
function add_widget_above_toc($the_content) {
  if ( is_single() && is_active_sidebar( 'widget-above-toc' ) ) {
    // ウィジェットの表示文字列を取得する
    ob_start();
    dynamic_sidebar( 'widget-above-toc' );
    $widget_content = ob_get_clean();
 
    $pos_start = mb_strpos( $the_content, '<div id="toc_container"' ); // 目次の位置を取得する(TOC+の場合)
    //$pos_start = mb_strpos( $the_content, '<div id="ez-toc-container"' ); // (Easy Table of Contents の場合)
    if ($pos_start === false) {
      $the_content = $widget_content . $the_content;
    } else {
      $html_before = mb_substr( $the_content, 0, $pos_start );
      $html_after = mb_substr( $the_content, $pos_start );
      $the_content = $html_before . $widget_content . $html_after;
    }
  }
  return $the_content;
}
add_filter( 'the_content','add_widget_above_toc', 110 );

function show_post_thumbnail(){
    return get_the_post_thumbnail();
}
add_shortcode('ec','show_post_thumbnail');

これでテーマの編集は完了です。

 

[外観] - [ウィジェット] で設定

1.上記の操作で【目次上】という名前のウィジットが追加されています。

 

2.カスタムHTMLを追加して以下を記述

br
br
[ec]
br
br
br

※↑半角にしてください。

これで作業は完了です。

仕上がりはこんな風になります。

 

まとめ 詳しい知識は不要で編集可能だった

今日の天気は快晴です。

この記事を投稿したらピクニックに行こうと思います。

私はこのブログを通して副業を実施しています。

しかしこうしたブログ内の「効率的に運営する」という概念も磨いていこうと思います。

今回の投稿も師匠に感謝です。

-Word Press, 雑記
-, , , , , , ,

Copyright© ビジクル.com 翔太のビジネスクルージング , 2019 AllRights Reserved Powered by STINGER.