grayishスキン適用中

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

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

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

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

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

なので

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

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

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

\お得なキャンペーン実施中!/
エックスサーバーキャンペーン

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

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

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

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

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

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

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

WordPressメニューを作成する

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

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

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

新規メニューの作成

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

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

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

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

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

表示オプションの設定

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

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

メニュー項目の追加

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

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

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

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

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

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

オプション:リボン設定

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

オプション:リボン設定

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

おすすめ
エックスサーバーでサイトを作成する方法
新着
エックスサーバーでサイトを作成する方法
注目
エックスサーバーでサイトを作成する方法
必見
エックスサーバーでサイトを作成する方法
お得
エックスサーバーでサイトを作成する方法

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

おすすめ
エックスサーバーでサイトを作成する方法
新着
エックスサーバーでサイトを作成する方法
注目
エックスサーバーでサイトを作成する方法
必見
エックスサーバーでサイトを作成する方法
お得
エックスサーバーでサイトを作成する方法

メニューの保存

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

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

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

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

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

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

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

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

表示例

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

レンタルサーバーと契約
サイトを始めるなら独自ドメインとレンタルサーバは必須です。
サムネイルサイズの設定
Cocoon推奨のサムネイルサイズ設定です。
サムネイルを再生成する
テーマを変更したばかりだとサムネイルサイズがバラバラです。再生成して画像サイズを均一化しよう。
おすすめ
おすすめプラグイン集
Cocoonと併せて利用すると便利なプラグインの紹介です。
基本的な広告設定
AdSense等を設定してサイトを収益化しましょう。
テキストウィジェット等でショートコードを利用すれば、サイドバーやフッターなどでも表示できます。

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

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"(複数指定する場合はスペースで区切る)

デフォルト値:(空欄)

horizontal

horizontalは、デフォルトで縦並びだったリストを横並びに表示します。

入力例:horizontal=1

デフォルト値:0(縦並び表示)

v2.6.8.3~

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

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

以下のように書くことで

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

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

レンタルサーバーと契約
サイトを始めるなら独自ドメインとレンタルサーバは必須です。
サムネイルサイズの設定
Cocoon推奨のサムネイルサイズ設定です。
サムネイルを再生成する
テーマを変更したばかりだとサムネイルサイズがバラバラです。再生成して画像サイズを均一化しよう。
おすすめ
おすすめプラグイン集
Cocoonと併せて利用すると便利なプラグインの紹介です。
基本的な広告設定
AdSense等を設定してサイトを収益化しましょう。
naviショートコードは、以前のデザイン仕様に合わせてデフォルト状態で「タイトルが太字」、「矢印表示」状態で出力されます。

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

Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。 1つのトピックにつき1つの質問を書き込んでください 不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください 該当部分のキャプチャ・環境情報...

まとめ

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

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

作成者

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

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

https://www.orank.net/1972

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

ありがとうございます!

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