サイト全体に「モダンブラック 」スキン適用中。

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

ショートコード

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

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

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

なので

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

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

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

スポンサーリンク

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

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

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

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

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

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

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

WordPressメニューを作成する

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

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

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

新規メニューの作成

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

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

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

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

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

表示オプションの設定

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

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

メニュー項目の追加

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

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

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

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

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

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

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

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

オプション:リボン設定

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

おすすめプラグイン集の設定例

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

リボンの表示例

メニューの保存

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

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

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

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

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

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

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

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

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

表示例

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

テキストウィジェット等でショートコードを利用すれば、サイドバーやフッターなどでも表示できます。

typeオプション

typeオプションを利用することで、カード表示を変更することもできます。

type無し

type無し

type=1(区切り線)

カードの下に点線があります。

type=1(区切り線)

type=2(枠あり)

カードをボーダーで囲みます。

type=2(枠あり)

まとめ

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

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

作成者

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

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

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

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

ありがとうございます!

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

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

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

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

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

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

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

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

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
△アダルト・出会い系サイト可(条件あり)
△開始したてなので運営能力は未知数(対応良)

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

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

Cocoon

コメント

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