お役立ちプラグイン特集　List Category Posts

2021-02-12WordPress,WordPress編集作成,作り方,ホームページ,ウェブサイト作成,webサイト,css装飾,テンプレート作成,リストアップ,カテゴリー別,分類,List Category Posts,Shortcodes Ultimate,テーマ,プラグイン,webサイト作成,WordPress学習,WordPress模写,WordPress新規作成,WordPress,WordPress化,初心者向け

WordPress編集編　ステップ６

Lists Category Posts の使い方
お役立ちプラグイン特集


【初心者向け】
ワードプレスでウェブサイト作成
親切丁寧にナビゲート♪

今回はプラグイン List Category Posts についてです。
これからいくつかお役立ちプラグイン特集をしていきたいと思っています。

今回は第１弾！　です。

今回のMENU

Lists Category Post

プラグインは何？ でご紹介したリストを作成してくれるプラグインです。

カテゴリ別に全件とか新着記事を５件などさまざまな条件で記事をリストアップしてくれます。

snow

模写、新規作成、どんなトレーニングでもどんなサイト作成でも利用しています。私にとって必需品プラグインです！

ご利用になっているテーマとの互換性や相性は確認なさってください。

snow

まずは利用しているテーマで推奨していないプラグインを調べましょう。

実はこのサイトのテーマとの互換性は未検証となっています。
現在のところサイト運営に問題がないので利用しています。

今まで問題なく表示されていた画面が表示されなくなったり、想定している動きをしなくなる場合は、
新しく入れたプラグインが影響していることが多いようです。
こうした場合は新しく入れたプラグインとの相性がよくないのかなと思われます。

確認ができてインストール、有効化ができたステップからのまとめをしますね。

プラグインのインストール、有効化の仕方
プラグインは何？

基本的なショートコード

カテゴリ名抽出、表示件数、表示順

トップページで表示している目次です。
更新済みの記事をカテゴリ別にリストアップしています。

ショートコードブロックを開きます。

ショートコードの入力は [ で始めて ] で終わります。

catlist

List Category Posts の基本コードです。このコードで始めます。

name='switching'

name はカテゴリ名です。
カテゴリ名が switching （当サイト：WordPress化）の記事を指定しています。
カテゴリ名は ' （シングルクォーテーション）または " （ダブルクォーテーション）で囲みます。

複数のカテゴリを指定したい場合は半角カンマで区切って列記します。

name=’AAA,BBB’AAAとBBBのカテゴリをリストアップ
name=’AAA+BBB’AAAとBBBの両方のカテゴリを登録してある記事
tags=’ABCDE’ABCDEというタグの記事をリストアップ

複雑な条件（AND、OR）やタグ別などでもリストアップができます。
こちらの記事がとても参考になります。

numberposts=-1

表示件数を指定します。
５件表示なら numberposts=5 です。
上記の -1 は全件表示を表しています。
指定をしないとデフォルト値の10件表示になります。

order=asc

order は表示順です。
asc は ascebding （昇順）です。
降順なら desc (descending）です。

他にも投稿日、更新日、投稿者や記事の抜粋、アイキャッチなども指定して表示させることができます。
表示順もどの項目で行うか指定できます。

バディのクリス

参考記事を見てみてね！

このように List Category Posts でコード指定しておけば
記事を投稿するたびに目次を追加しなくても自動的に表示してくれます。
とても有難いプラグインです。

記事タイトルの前の step.1 はcss装飾でナンバリングしています。

編集予定♪

具体的なコードをプログラミング編でご紹介しますね。

投稿年で抽出、投稿日表示

WordPress模写
題材サイト

当サイトWordPress模写の題材サイトです。

2018年のニュース一覧をカテゴリ別に表示しています。
記事タイトルをクリックすると該当記事画面に遷移します。
ショートコードは以下のようになります。

name （カテゴリ名）と numberposts （表示件数）は先ほどと同じです。

year=2018

投稿年が2018年を指定しています。

date=yes

投稿日の表示を指示しています。
ちなみに更新日の表示は date_modified=yes です。

template=press_release

デフォルトだと投稿日は記事タイトルの後方に表示されることになります。

（例）nnnn-nn-nn ：日付
　新着！！　記事タイトル nnnn-nn-nn
　New Article title nnnn-nn-nn
　お知らせ nnnn-nn-nn

こんなカンジに表示されます。
記事タイトルの文字数がバラバラなので、後方の日付の位置が揃いません。

（例）nnnn-nn-nn ：日付
　nnnn-nn-nn 新着！！　記事タイトル
　nnnn-nn-nn New Article title
　nnnn-nn-nn お知らせ

日付を前にした方が見やすいレイアウトになります。

表示の順番を入れ替えるには テンプレート を使います。

少し難しいかもしれませんが、初心者の私もできたのでご紹介しますね。

バディのクリス

ボクも応援してるからね！　がんばろっ！！

リスカテ応用編

テンプレート作成

snow

勝手に短縮してしまいました💦
（たぶんこのサイトでしか通じません×）

日付と記事タイトルの表示順の入れ替えをします。

WordPressのファイル wp-content/plugins/list-category-posts フォルダを探します。

①ローカル環境なら local by flywheel の管理画面のサイト名下の小さい ＞ をクリックします。
ファイルマネージャーで wp-content/plugins/list-category-posts を探します。

②本番環境ならサーバーのファイルにアクセスすることになります。プラグインの WP File Manager がファイル操作を助けてくれます。

WP File Manager を選んで、 wp-content/plugins/list-category-posts を探します。

wp-content/plugins/list-category-posts フォルダをコピーします。

wp-content/themes/使用しているテーマ名（子テーマ）下にペーストします。

この list-category-posts フォルダの下に default.php があります。
このファイル名をこれから使うテンプレート名に変更します。
わかりやすい名前がいいと思います。
私は press_release.php にしています。

この press_release.php を開きます。
以下のようなコードを探します。

//
  //Show the title and link to the post:
  $lcp_display_output .= $this->get_post_title($post);
  
  //Show date:
  $lcp_display_output .= $this->get_date($post);

//Show date:
$lcp_display_output .= $this->get_date($post);

これが投稿日を表示させるコードです。

//Show the title and link to the post:
$lcp_display_output .= $this->get_post_title($post);

こちらが記事タイトルを表示させるコードで、
このコードが投稿日表示のコードより上に記述されています。
この順序を逆にします。

// 
  //Show date:
  $lcp_display_output .= $this->get_date($post);

  //Show the title and link to the post:
  $lcp_display_output .= $this->get_post_title($post);
snow

変更できました！！

year=20182018年の記事を特定
name="press_release"カテゴリ名 press_release に特定
date=yes投稿日表示
numberposts=-1該当する記事を全件表示
template=press_releasepress_release というテンプレートを利用

先ほど修正した press_release.php ファイルがテンプレートです。
テンプレート名は .php を除いた名前です。

congratulations!!
バディのクリス

日付がタイトルの前に表示できたね！！

CSS装飾

私がこのプラグインを最も好きな機能がこれです！

当サイトのサイドバーですが、ここも List Category Posts を使用しているのですが現在表示しているタイトルだけピンクになっています。

これは List Category Posts が class="current" というクラス名を付与してくれています。

当サイト　サイドバー
/* 表示ページタイトルピンク */
.current_category > li.current {
    border: 2px solid #e16871;
    border-radius: 5px;
}
.current_category > li.current > a {
    color: #ef9c99;
}

上のコーディングでピンクの枠の指定、
下部分でテキスト（文字）の色をピンクにしています。

snow

本当にお役立ちプラグインなのです！！

Shortcodes Ultimate

どのサイト作成の場合でも利用しています。
次回ご紹介する Shortcodes Ultimate とセットで愛用しています。

ワードプレス編集編次回はお役立ちプラグイン特集「Shortcodes Ultimate」です🎵

今回はここまでにしますね。
お疲れ様でした。
お役立ちプラグイン List Category Posts 使ってみてくださいね♬

今回のまとめ

わかりづらい点、うまくいかなかった箇所などありましたらお知らせください。　　　コメント欄へ

お役立ちプラグイン特集第１弾でした。

次回は今回の List Category Posts とセットで愛用している Shortcodes Ultimate です。

次のSTEPに進んでくださいね。

STEP6
お役立ちプラグイン特集
「Shortcodes Ultimate」の使い方　　　　

amazon プライム 無料体験お申し込みはこちらから

※Amazonのアソシエイトとして、当メディアは適格販売により収入を得ています。

趣味で源氏物語を【超訳】しています。
　話し言葉でお気軽GENJI

　よかったら遊びにきてください。

サイトロゴ
https://garden.snowlilas.com/

小倉百人一首も【超訳】しています。
　話し言葉でお気軽 OGURA

　よかったら遊びにきてください。

サイトロゴ
https://cafe.snowlilas.com/

2021-02-12WordPress,WordPress編集作成,作り方,ホームページ,ウェブサイト作成,webサイト,css装飾,テンプレート作成,リストアップ,カテゴリー別,分類,List Category Posts,Shortcodes Ultimate,テーマ,プラグイン,webサイト作成,WordPress学習,WordPress模写,WordPress新規作成,WordPress,WordPress化,初心者向け

Posted by snow