【雑記】
WordPressを使ってブログを書いているWordpressユーザーも多いはず。
このサイトもWordpressで作成していますが、
『雑学』という大雑把なテーマ故、
どうしても記事同士の繋がりが弱く、
リンクを張り巡らしにくいという問題がありました。
つまり、過去の記事で検索からの流入を見込めないような記事は、
アーカイブでも深く埋もれ、2度と日の目を浴びることがないガラ記事(ガラパゴス記事 ただ今命名 笑)となってしまうのです。
そんな時、考えていたのが、
- 全ての記事の中から○○件ランダムで表示できないか?
- カテゴリー・タグの記事リストを○○件ランダムで表示できないか?
- サイドメニューに記事を○○件ランダムで表示できないか?
- 現在観覧中のページのカテゴリー記事一覧を表示できないか?
ということ。
しかし、僕はHTML・CSSも初心者に毛が生えた程度で、Javaなんてしょっぱな躓き、PHPって何?(携帯?)というレベル、、、。
こんな僕が縋り付くのはプラグイン!!
PC画面に穴が開くほどネット上をさまよって、ようやく見つけました!!(案外あっさり)
そのプラグインの名は「List category posts」!(リストカテゴリーポスト)
今回は「List category posts」の機能と使い方を自分用のメモを兼ねてご紹介します。
目次
記事中、サイドメニューに記事一覧を表示できる「List category posts」
「List category posts」で、でできること。
- 記事内に指定したカテゴリ・タグの記事一覧を表示できる!
- サイドメニューに指定したカテゴリ・タグの記事一覧を表示できる!
(ウィジェットでラクラク!) - 観覧中のページカテゴリーに合った記事を表示させたり、動的なページも作成可能!
- パラメーターが豊富で、様々な状況で使える!
「List category posts」が使えるシチュエーション
- いままで手動で古い記事をピックアップして表に出していたけど面倒だ!
- サイドメニューに指定したジャンルの記事のリストを作りたい!(自動更新)
- 観覧中の、関連記事のみ表示させたい!
- 複数の筆者が居るが、筆者毎に記事一覧表示させたい!
- 「カテゴリー1」と「カテゴリー2」の記事一覧を表示したい!
百聞は一見に如かず!
今回、画像を踏まえてご説明しますので、一度見てください!
「List category posts」インストール方法
まず初めに、Wordpressに「List category posts」をインストールする必要があります。
プラグインの新規追加の検索窓に、【 List category posts 】と入力してインストールし、有効化してください。
多くの方が使ってるプラグインなので大丈夫だとは思いますが、心配な方はバックアップを取ってからインストールしてください。
これで準備完了!
設定なんてする必要ありません!
後はショートコードを本文中に入力するだけで指定したカテゴリーの記事一覧を表示することが可能になります!
事項から、そのショートコードと、仕えそうなパラメーターをいくつかご紹介します。
「List category posts」使い方【基本コード】
まず、基本となるショートコードがこちら。
[catlist id=●●]
←指定カテゴリー記事を表示
[catlist tags="タグ名(スラッグ)"]
←指定タグの記事を表示
●●部分には、idを記述します。
参照したidを入力したショートコードを本文中に書き込むだけで指定したidカテゴリーの記事一覧を表示させることが可能です。
カテゴリー・タグのid参照方法
WordPressのカテゴリー一覧画面で
カテゴリーにマウスオーバーしたときに下部のアドレスに表示されている。
「全ての記事」というカテゴリーを作成している僕のサイトの場合、
「全ての記事」のカテゴリーIDは「1」。
※投稿記事一覧画面で、記事のid(post id)も確認できる。
基本コードのidに参照したidナンバーを入力すれば、
参照idの記事一覧が表示されます。
このサイトの場合、全ての記事のid=1を書き込むと、、、
[catlist id=1]と書き込むと
このように表示されます。
基本コードのみの場合、
参照したカテゴリー・タグの最新の記事順で表示されます。
この基本コードに、パラメーターを付け足すことで、
表示記事件数を決めたり、
ランダム表示にしたり、
表示させない記事を決めたり、
できます。
凄いプラグインですよね!
次項からは、使えそうなパラメーターをいくつかご紹介します。
「List category posts」使い方【パラメーター】
パラメーターは数多く用意されていて全てはご紹介できません。
全て知りたい方は、【公式の説明書】をお読みください。
パラメータを適用させる時は、
基本のショートコードの後に半角スペースを空けて記述するだけです。
2つ以上のカテゴリー・タグを指定する
id・カテゴリー名を指定する際、【 + 】で続けて記述する。
例)
[catlist id=1+2]
カテゴリーの1と2の記事一覧を表示
表示させないカテゴリー・タグを指定する
id・カテゴリー名を指定する際、【 – 】で続けて記述する。
例)
[catlist id=A-B]
カテゴリーB以外のカテゴリーAの記事一覧を表示
※タグの場合、
指定したタグ名の後に半角スペースを開けて下記赤字を記述。
[catlist tags="タグA" exclude_tags="タグB,タグC"]
タグB・C以外のタグAの記事一覧を表示
指定した記事をランダムで表示させる
ランダムで表示させたいときは、
基本のコードの後に半角スペースを空けて下記を記述する。
orderby=rand
指定した記事をタイトル順で表示させる
タイトル順で表示させたいときは、
基本のコードの後に半角スペースを空けて下記を記述する。
orderby=title
表示させる記事の数を指定する
表示させる記事の数を指定したいときは、
基本のコードの後に半角スペースを空けて下記を記述する。
numberposts=●●
●●には表示させたい記事数(半角数字)が入る。
サムネイル画像を表示させたい
サムネイル画像を表示させたいときは、
基本のコードの後に半角スペースを空けて下記を記述する。
catlist thumbnail=yes
そのままの状態ではサムネイルは右側に表示されます。
グダグダな感じになったので、僕なりの汚いCSSで調整してみました。
ツッコミどころ満載なソースですが、CSSの知識が全くないという方は、
Wordpressの『外観』→『カスタマイズ』からCSSシート編集が可能ですので、コピペで貼り付けてご利用ください。
/*カテゴリー・タグ別記事一覧CSS 画像を左に*/ .lcp_catlist li:after{/*クリアボス*/ content: ""; display: block; clear: both; } .lcp_catlist li{ list-style-type: none;/*リストのアイコン消す*/ margin-bottom: 10px;/*リスト間マージン*/ } .lcp_catlist li a{margin-left: 10px;} .lcp_catlist img{float: left;}/*写真を左に*/
※因みに、
追加パラメーターでサムネイルにクラス名も付けることができます。
クラス名の指定は、
thumbnail_class=”クラス名”
で指定可能。
半角スペースで区切って記述
※サムネイルバナーサイズの指定
catlist thumbnail_size=100,100
100,100の部分が幅、高さ。
数値を変えれば調整可能。
「もっと読む」リンクを表示させる
半角スペースで区切り、
posts_morelink=”「もっと読む」(任意の文字列)”
と記述するだけで、各投稿の後に「もっと読む」リンクを生成可能。
筆者(投稿者)を指定する
筆者毎の記事を表示させる場合、
※下記が基本コードになります。
[catlist author_posts="筆者名"]
現在表示中の記事のカテゴリー記事一覧を表示
基本形が以下になる。
と記述。
応用 例)
[catlist post id=1-3 orderby=rand catlist thumbnail=yes thumbnail_class="cat-list-home" numberposts=10]
カテゴリー3以外のカテゴリー1の記事を、ランダムで10件表示。
かつ、サムネイル画像を表示し、サムネイル画像はclass名をcat-list-homeと付ける。
「List category posts」使い方【ウィジェット】
ウィジェットで簡単にサイドメニューに記事一覧をのせることができます。
これは聞くより、実際に触った方が早いのでよく使う項目を一部写真で紹介させて頂きます。
カテゴリーを選択して、表示件数を決める。
表示ルール、昇降順を決めてサムネイルの有無を選択。
除外したいカテゴリー等あれば記述、、、
といった感じで多くカスタマイズできて非常に便利!!
日本語表記なら100点満点のプラグインではないでしょうか?