Lightningでお知らせやトピックスをトップページに表示する

この記事を読むのに必要な時間は約 7 分です。

Lightningでお知らせやトピックスをトップページに表示する

お知らせとトピックスをトップページに表示するのはそう難しいことではありません。 ただ、お知らせとトピックスの違いをご存知ですか? 通常、お知らせには最新のNewsを表示することが多いです。 トピックスとは、トピックは、英語のTopicから来ており、「話題」「議題」「主題」という意味であり、時事性もあるが人が集まる場所において話のタネあるいはセミナーやシンポジウム等で何らかのテーマについてということになります。 この違いをまず理解してください。
 

カテゴリー登録する

カテゴリー ブログのページが表示されると上記のキャプチャー画像のようにカテゴリーが表示されます。 このカテゴリーをまず作成する必要があります。 お知らせとトピックスを作成してみます。   カテゴリー登録 投稿→カテゴリーでこの画面なのですが・・・ 名前の部分にお知らせもしくは、トピックスと入れます。 スラッグは、http://******.com/この部分に相当します!/ 日本語でもOKなのですが、基本的に英語で入れるようにしてます。 その方が無難です。 投稿画面で作成するとスラッグの指定ができません。 この画面で指定しておく方がいいですね。  
 

カテゴリーの記事作成

新規作成 上記の場合、お知らせのカテゴリーに作成しています。 よく見ているとさっきの説明と違うとアドレス見て思う方もいると思いますが・・・ 記事のアドレスとカテゴリーのアドレスとは違うので気をつけてくださいね。 この部分が固定ページ作成で生成されるアドレスと決定的に違う部分です。 普段の投稿と同じようにプラグインなどいろいろ使えたりしますよ ショートコードの使用も可能ですので他者のブログに差をつけることもできるかもしれませんね。  
 

トップページにウィジェットを追加

この項目は、Lightningをカスタマイズするというページで解説したことに似ていますが・・・ テキストを追加する ここでテキストを追加するとタイトルに「お知らせ」と入れておきます。 ここでショートコードを追加したいのでここでひとまずおいておきます。  
 

ウィジェットにショートコードを追加できるようにする

ウィジェットにショートコードを追加できるようにするためにWP Total Hacksというプラグインを追加します。 プラグイン→新規追加を開きます。 「WP Total Hacks」を検索するとすぐに出てきます。 WP Total Hacks 「今すぐインストール」をクリックします。   有効化 インストールされると「有効化」に変化しますので有効化します。 ここまでは、簡単です。 WP Total Hacks 有効化されると・・・ 設定→WP Total Hacksで設定画面が開きます。 設定画面 この画面が開くのですが・・・ その他のタブを開きます。   設定 上の赤枠をクリックします。   クリックすると停止になっていますが・・・ 有効化に変更して下の「変更を保存」のボタンをクリックします。 これでこのプラグインの設定変更は終了です。 プラグインを使わない場合は、functions.phpの編集が必要になります。
functions.php
add_filter(‘widget_text’, ‘do_shortcode’ ); global $wp_embed; add_filter( ‘widget_text’, array( $wp_embed, ‘run_shortcode’ ), 8 ); add_filter( ‘widget_text’, array( $wp_embed, ‘autoembed’), 8 );
 
 

ショートコードをどこで作成する?

さて、ショートコードが使えるようになったんですが・・・ どこから挿入できるん??? ボタンないですが・・・ そう、そこなんですが・・・ ブログの新規作成画面を開きます。 新規作成 この画面で「ショートコードを挿入」をクリックします。   投稿 赤枠の投稿をクリックします。   ショートコード設定 この設定では、ページ辺りの投稿数 お知らせやトピックスなどは、5つが普通じゃないかなって思います。 次の投稿タイプは、最初に投稿が選択されていればOK 次のタクソミーの下の条件 ここで「お知らせ」を選択しておきます。 順は、赤枠ないですが、ランダムより最終更新日の方がいいかもしれません。 最後に「ショートコード挿入」をクリックします。 表示されたショートコードをコピーしてウィジェット(トップページコンテンツエリア)に貼り付けると完了ですね。 トップページコンテンツエリア ちょっとした工夫でできるのでチャレンジしてみてください。  

表示を簡素化したい場合

お知らせ通常であれば投稿日や抜粋文章などが表示されるのですが、不要な場合は非表示にすることも可能です。お知らせなのでアイキャッチ画像とページへのリンクだけでいいかなって思ってます。
ソース
<h2 class=”balloon”>新着情報</h2> [ショートコード] <style type=”text/css”> .su-post-meta {display: none;} .su-post-excerpt {display: none;} .su-post-comments-link {display: none;} </style> <hr style=”background-image: url(‘https://wp908.sakura.ne.jp/wp/wp-content/uploads/2018/06/bar70.jpg’); height: 4px;” />

 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
]]>

くまはちLABのご利用ありがとうございます!くまはちLABの最新情報をフォローしてゲットしてください!