【WordPressテーマ】Cocoonのモバイルボタン設定の覚書

2024年12月31日ワードプレス

Wordpresの人気無料テーマcocoonの
モバイルボタンの設定の仕方について解説します。

ちなみにcocoonは、
ブログ運営には最適なテーマです。

ただし、サイト作りにはカスタマイズ性が
あまりよくないのでお勧めできません。

また結構プラグインとの互換性も
良くなかったりします。

ただ、いろんなデザインがありますし
色々細かい設定が可能なので
初心者の方にも扱いやすいテーマの一つです。

今回解説させていただく
モバイルボタンについても
ヘッダーエリアとフッターエリアに
自由に設置が可能なので
ボタンエリアを色々設定したい人にも
cocoonは良いですね。

ヘッダーモバイルボタンやフッターモバイルボタンは
以下手順で設定します。

①cocoon設定を行う

「Cocoon設定＞モバイル」より
希望のモバイルメニューを選択します。

今回は、「ヘッダー・フッターモバイルボタン」を選択してます。

選択後必ず「変更をまとめて保存」をクリックして保存してください。

②メニューの設定

「外観＞メニュー＞新しいメニューを作成しましょう」より
それぞれのモバイルボタン用のメニューを新規で作成します。

続いて、「表示オプション」より「CSSクラス」にチェックを入れます。

「メニュー設定」にて、「ヘッダーモバイルボタン」
または、「フッターモバイルボタン」にチェックを入れる。

あとは、設定したいボタン内容を
メニューに追加すればOK。

あとこまめに保存をするようにしてくださいね。

③モバイルボタンを作成する

モバイルボタンの項目は、メニューに追加していくことで
実装されます。

モバイルボタンの特融の機能は以下の通りです。

URLコマンド	リンク文字列例
#menu	メニュー
#home	ホーム
#share	シェア
#follow	フォロー
#search	検索
#toc	目次
#top	トップ
#prev	前へ
#next	次へ
#comments	コメント
#logo	サイト名
#sidebar	サイドバー

こんな感じで設定します。

その他、例えば、モバイルボタンで
電話発信できるようにするには、

まず、「カスタムリンク」にて
URLの項目に「te:09000000000」といった感じで
電話番号を設定すると
そのボタンをタップしたときに、
その電話に発信することが出来るようになります。

そして「ナビゲーションラベル」に
「TEL」などラベルを入力

「CSS Class」に「fa ●●」といった感じで
FontAwesomeのコードをコピペします。

下記リンク先から
イメージに合うアイコンを選びコードを
簡単にコピペできます。

是非、お試しください。