現在デフォルトスキンとして「COLORS(ブルー)」を適用中。

意図した記事一覧を作成できる「ナビカード」ショートコードの使い方

ショートコード
この記事は約5分で読めます。

Cocoonの本文中や、サイドバー等に「自分の表示させたいリンク」をカード形式で表示できるナビカードショートコードを実装しました。

Cocoonには、「新着記事」や「人気記事」ウィジェットはあります。

けれどこれは、テーマが並び順に従って自動生成するものなので、ユーザー側が表示を制御するには複雑なカスタマイズをする必要があります。

なので

新着記事や人気記事で、表示させたいリンクを自由に選択できたらいいのに…

と思われる方もおられると思います。実際、フォーラムにも同様の要望は何件かありました。

そんな悩みを解決してくれるのが、「ナビカード」ショートコードです。

スポンサーリンク

ナビカードを利用するとこんなことができる

ナビカードを利用すると、こんな感じの任意のリンクカードを簡単に作成し、手軽にショートコードから呼び出すことができます。

以下ではその使い方を説明します。

ナビカードを利用する主な手順

ナビカードを利用するための主な手順はこれだけ。

  1. WordPressメニューを作成する
  2. ナビカードをショートコードで呼び出す

大まかな設定方法はこれだけです。以下で詳しく方法を説明します。

WordPressメニューを作成する

メニューの作成は、WordPressのグローバルナビの作成方法と同じです。

まずはWordPress管理画面から「外観→メニュー」を選択します。

外観からメニューを選択する

新規メニューの作成

メニュー画面で「新しいメニューを作成しましょう」リンクから新規メニューを作成します。

メニュー画面で新規メニューの作成

「メニュー名」を入力して「メニューを作成」ボタンを押します。

サイトの作成手順メニューの作成

以下では、「サイトを作成する人がまず読むべきリンク集」という体(てい)でナビカードを作成していきます。

表示オプションの設定

メニューを作成したら「表示オプション」から「CSSクラス」と「説明」を有効にしておきます。

表示オプションからCSSクラス等説明を有効化

メニュー項目の追加

「メニュー項目を追加」からナビカードを作成したいメニューを選択していきます。

メニュー項目を追加からメニュー作成

現在のところ、「投稿」と「固定ページ」と「カテゴリー」と「タグ」ページにしか対応していません。

メニュー追加直後はこんな感じ。

メニューを追加した直後の状態

タイトルと説明を入力する

基本的な使用方法としては、「ナビゲーションラベル」にタイトルを。「説明」に説明文を入力します。

ドメインの取得メニュー入力例

オプション:リボン設定

「CSSオプション」にはナビカードにタスキがけするリボンを選択します。

オプション:リボン設定

リボンの表示例はこちらになります。

おすすめ
カラフルボックスでサイトを作成する方法
カラフルボックスでサイトを作成する方法
安価で始められて、サイトが成長した際には容易にスケールアップが可能なサーバーです。
新着
ConoHa WINGでサイトを作成する方法
ConoHa WINGでサイトを作成する方法
とにかく高速化を求めるサーバーならこちら。
注目
MixHostでサイトを作成する方法
MixHostでサイトを作成する方法
高性能かつ高機能なコストパフォーマンスの高いサーバーです。個人的には、自動バックアップ・無料リストア機能がお気に入り。
必見
エックスサーバーでサイトを作成する方法
エックスサーバーでサイトを作成する方法
安定感抜群の老舗レンタルサーバです。安定運営にかけては信頼度が非常に高いです。
お得
JETBOYでサイトを作成する方法
JETBOYでサイトを作成する方法
非常に安価なプランがあります。無料でWordPress引っ越しオプションがあります。

大きなサムネイルでリボンを表示させた場合はこんな感じ。

おすすめ
カラフルボックスでサイトを作成する方法
カラフルボックスでサイトを作成する方法
安価で始められて、サイトが成長した際には容易にスケールアップが可能なサーバーです。
新着
ConoHa WINGでサイトを作成する方法
ConoHa WINGでサイトを作成する方法
とにかく高速化を求めるサーバーならこちら。
注目
MixHostでサイトを作成する方法
MixHostでサイトを作成する方法
高性能かつ高機能なコストパフォーマンスの高いサーバーです。個人的には、自動バックアップ・無料リストア機能がお気に入り。
必見
エックスサーバーでサイトを作成する方法
エックスサーバーでサイトを作成する方法
安定感抜群の老舗レンタルサーバです。安定運営にかけては信頼度が非常に高いです。
お得
JETBOYでサイトを作成する方法
JETBOYでサイトを作成する方法
非常に安価なプランがあります。無料でWordPress引っ越しオプションがあります。

メニューの保存

全ての入力を終えたら「メニューを保存」ボタンを押してください。

ナビカードメニューを保存する

ナビカードをショートコードで呼び出す

メニューを作成したらショートコードで呼び出すだけです。

ショートコードの呼び出し方

基本的な呼び出し方法はこちら。

[navi_list name="メニュー名"]

先程作成した「サイトの作成手順」メニューであれば、以下のように呼び出します。

[navi_list name="サイトの作成手順"]

表示例

実際の表示例はこんな感じ。

ドメインの取得
ドメインの取得
サイトを作成するなら、必ず必要となる独自ドメインの取得方法です。
レンタルサーバーと契約
レンタルサーバーと契約
サイト運営にはサーバも重要。安くて速いコストパフォーマンスの高いサーバーを使おう。
サムネイルサイズの設定
サムネイルサイズの設定
Cocoon推奨のサムネイルサイズ設定です。
サムネイルを再生成する
サムネイルを再生成する
テーマを変更したばかりだとサムネイルサイズがバラバラです。再生成して画像サイズを均一化しよう。
おすすめ
おすすめプラグイン集
おすすめプラグイン集
Cocoonと併せて利用すると便利なプラグインの紹介です。
テキストウィジェット等でショートコードを利用すれば、サイドバーやフッターなどでも表示できます。

ショートコードオプション

navi_listショートコードで使えるオプションはこちら。

type

typeには、以下のうちいずれかの値を指定します。

  • default:通常のリスト
  • border_partition(or 1):カードの上下に区切り線を入れる
  • border_square(or 2):カードに枠線を表示する
  • large_thumb:大きなサムネイル表示
  • large_thumb_on:大きなサムネイルにタイトルを重ねる

デフォルト値:default

※一部1や2のような数字で指定出来るのは、旧バージョンとの互換性を保つためです。

それぞれの表示例はこちら。

default

default

border_partition(or 1)

border_square(or 2)

large_thumb

large_thumb

large_thumb_on

large_thumb_on

 

bold

boldオプションは、記事タイトルを太字にするかどうかです。

タイトルが太字になる

入力例:bold=1(太字にする)

デフォルト値:0(太字にしない)

arrow

arrowオプションは、カードに矢印を表示するかどうかです。

矢印の表示

入力例:arrow=1(矢印を表示する)

デフォルト値:0(矢印を表示しない)

class

classオプションには、リストのラップ要素に独自のclass属性を指定したい時に記入します。

拡張クラス追加オプション

入力例:class="ex-class"

入力例:class="ex-class1 ex-class2"(複数指定する場合はスペースで区切る)

デフォルト値:(空欄)

旧naviショートコードとの互換性

旧ショートコードのnaviも互換性のため利用できます。以前の仕様のままで良い場合は、記事のショートコードを貼り替える必要はありません。

以下のように書くことで

[navi name="サイトの作成手順"]

以下のように表示されます。

ドメインの取得
ドメインの取得
サイトを作成するなら、必ず必要となる独自ドメインの取得方法です。
レンタルサーバーと契約
レンタルサーバーと契約
サイト運営にはサーバも重要。安くて速いコストパフォーマンスの高いサーバーを使おう。
サムネイルサイズの設定
サムネイルサイズの設定
Cocoon推奨のサムネイルサイズ設定です。
サムネイルを再生成する
サムネイルを再生成する
テーマを変更したばかりだとサムネイルサイズがバラバラです。再生成して画像サイズを均一化しよう。
おすすめ
おすすめプラグイン集
おすすめプラグイン集
Cocoonと併せて利用すると便利なプラグインの紹介です。
naviショートコードは、以前のデザイン仕様に合わせてデフォルト状態で「タイトルが太字」、「矢印表示」状態で出力されます。

仕様変更の経緯はこちら。

ナビカードと新着記事・人気記事のカードのフォーマットを合わせてほしい
とても使いやすく機能が充実したテーマを無料で提供していただき、いつも感謝しております。 トップページを固定ページにして、自分で選んだオススメ記事、新着記事、人気記事を同じ数だけ並べて表示したいと考えています。 オススメ記事はナビカードのショートコードを利用して、新着記事・人気記事もショートコードを利...

まとめ

このように、本文やサイドバーなどに、自分の置きたいナビカード(リンクカード)を戦略的に配置できます。

効果的に配置出来れば、訪問者の誘導先をある程度は狙い通りにできるかもしれません。

作成者

このショートコードの大元となったコードは、中古ドメイン騎士 オーランを運営されているオーラン@中古ドメイン騎士さんが作成したものを、ほぼまんま利用させていただきました。

このショートコードを作成された経緯も含めて詳細はこちら。

Cocoon用記事一覧ショートコード HTML&CSS。トップの固定ページ化に。

WordPressの「メニュー」画面で作成・管理を行い、それをショートコードで利用するというアイディアは目から鱗でした。この発想はなかったです。

ありがとうございます!

ショートコード
スポンサーリンク
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年3ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:1年1ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon

コメント テーマの質問はフォーラムへ

タイトルとURLをコピーしました