Cocoonのスマホ固定ナビメニューを電話リンクにする需要ある?

スマホ表示をカスタマイズする男性 Cocoon

皆さま、おはようございます、こんにちは、こんばんわ。.Redと申します。
今日もよろしこお願いします!

ブルー隊長
ブルー隊長

よろしこって何やねんw

あっ。そーそーおっさんに聞きたい事があるんだぞ

.Red
.Red

ん?何ですか?

一人ボッチを楽しむ方法ならいくらでも教えてあげれるよ。

ブルー隊長
ブルー隊長

あふぉか!わしはおっさんと違ってモテるんやで?

一人ボッチになれる方法なら聞きたいけどな。わはははははー草っ草生える

 

  • 時代はスマホだぜーって人
  • モバイルのfooterに固定されたナビメニューをカスタマイズしたい人
  • スマホ依存症の人
  • 電話が鳴らなくて寂しい人
ブルー隊長
ブルー隊長

何だこれ?2番目以外どーでもいいし

Cocoon設定のモバイルタブの設定

.Red
.Red

で?聞きたい事って何ですか?

モバイルのスライドインメニュー

ブルー隊長
ブルー隊長

スクロールしても固定されてるナビゲーション、わしのサイトでは表示されてないんやけど、どうしたら表示されるの?

詳しくおせーて。

 

.Red
.Red

footerのスライドインボタンの事ですね。

Cocoon設定のモバイルタブから変更できますよ。

スライドインボタンを選択すれば良いですよ。

Cocoonのモバイルタブの設定画面

 

.Red
.Red

おかしいなぁ?デフォでスライドインになってるはずだけど。。。

ブルー隊長
ブルー隊長

そーそーこれこれ。最初は表示されてたんだよね。

何かhtmlとか書かんとあかんかなって思ったけど助かったぜ。

聞くまでもなかったな。

スマホのフッター固定ナビメニューから電話を掛けるカスタマイズ

ブルー隊長
ブルー隊長

んでな、わし独立する事にしたんよ。

だから、固定ナビから電話が掛けれるようにしたいんYA!

<a href="tel:090○○○○○○○○">090-○○○○-○○○○</a>

で、電話掛けれるのは知ってるんやけど。。。

.Red
.Red

独立ですか?随分唐突ですねー。(大丈夫かなぁ・・・)

確かに企業サイトなんかだと電話リンクは需要がありますね。

3つのカスタマイズ工程
  1. スマートフォン端末以外ではtelリンクを無効にする。
  2. スマートフォン端末以外は tel: リンククリック時のイベントを無効化する。
  3. スライドインボタンのリンクを、電話リンクに変更する。
    Cocoonのフッターメニューの文字とリンクを変更するカスタマイズ
  4. Cocoonのスライドボタンの画像アイコンを変更するカスタマイズ

 

電話リンクはこちらの記事を参考にさせていただきました。

リンクをスマートフォン端末以外では無効にする - Qiita
a要素のhref属性を "tel:***" と設定すると、スマートフォン端末ではブラウザタップから直接電話をかけることが可能になります。 ~~~html:HTML お問い合わせ:01...

 

スマートフォン端末以外ではtelリンクを無効にする。

.Red
.Red

head-insert.phpをいじって行くよ。

ブルー隊長
ブルー隊長

外観 → テーマの編集 → tmp-userにhead-insert.phpがあるね。

あれ?何かエラーが出て書き込み出来ないけど?

.Red
.Red

うん。直接は編集出来ないんだよ。

だから一度、FTPソフトで、head-insert.phpをデスクトップにダウンロードしてね。カスタマイズする時は必ずバックアップも取っておいてね。

 

エックスサーバーの場合、head-insert.phpは、
/hogehoge.com/public_html/wp-content/themes/cocoon-child-master/tmp-user
にあるから、ダウンロードしてね。

 

.Red
.Red

head-insert.phpに、下記を記載してください。プリーズ!

scriptタグを前後に入れてね。

$(function(){
    var ua = navigator.userAgent;
    if(ua.indexOf('iPhone') < 0 && ua.indexOf('Android') < 0){
        $('.telhref span').each(function(){
            $(this).unwrap();
        });
    }
});

 

ブルー隊長
ブルー隊長

オッケーできたよ。

で、これを元の場所にアップロードするのね?

head-insert.phpの管理画面

 

.Red
.Red

そーです。あぷっロードできたら、

外観 → テーマの編集 → tmp-userにhead-insert.php

を確認してみよう。

ブルー隊長
ブルー隊長

大事なところ噛んでるし。

オッケーできたよ。

 

  1. PHPは管理画面で直接編集できない。サーバーからダウンロードして編集。
  2. ダウンロードしたPHPは、編集する前にバックアップを取っておこう。

 

 

スマートフォン端末以外は tel: リンククリック時のイベントを無効化する。

.Red
.Red

次はCSSをいじって行くよ。

これは外観 → テーマの編集 →スタイルシート

直接編集できるお。下のコードを追加してね。

 

a[href^="tel:"] { cursor: default; }

 

ブルー隊長
ブルー隊長

これで、スマートフォン端末以外は、

tel: リンククリック時のイベントを無効化できるんだね?

スライドインボタンのリンクを、電話リンクに変更する。

.Red
.Red

後は、下記の電話を掛けるhtmlを画像に指定するんだ。

余計なお世話だけど、本文中バナーにも指定できるお。

<a href="tel:090○○○○○○○○">090-○○○○-○○○○</a>
ブルー隊長
ブルー隊長

バナーは本文だから分かるけど、

スライドインのボタンの指定ってどこでするの?

.Red
.Red

と、その前に、どの画像を電話リンクにしたいのかな?

モバイルのスライドインメニュー

ブルー隊長
ブルー隊長

んー・・・企業サイトだし、検索されるほど、記事もないし検索かなぁ~

私のサイトには(7月11日現在)記事が少なく、グローバルメニューがありませんので、一番左に表示されるメニューがありません。(通常はあるもの)
.Red
.Red

先にそれぞれのスライドインボタンを見ておこう。

検索ボタンよ、君の名は。

  • メニュー:navi-menu-button
  • ホーム:home-menu-button
  • 検索:search-menu-button
  • トップ:top-menu-button
  • サイドバー:sidebar-menu-button

 

.Red
.Red

search-menu-button!三葉じゃない?!

ブルー隊長
ブルー隊長

涙が出てきたよ。おっさん不憫やぁ・・・

.Red
.Red

三葉は、 search-menu-buttonは、

mobile-menu-buttons.phpに居るよ!

ブルー隊長
ブルー隊長

ん?どこにも居ないよ?

.Red
.Red

うん。子テーマには居ないから、

親テーマからダウンロードするんだ。

 

エックスサーバーの場合、mobile-menu-buttons.phpは、
/hogehoge.com/public_html/wp-content/themes/cocoon-master/tmpにあるから、
ダウンロードしてね。

Cocoonのフッターメニューの文字とリンクを変更するカスタマイズ

.Red
.Red

それでは早速、mobile-menu-buttons.phpの具を見てみよう。

57行目位に検索ボタンがあるよ。

  <!-- 検索ボタン -->
  <?php if (!is_amp() || (is_amp() && is_ssl())): ?>
    <!-- 検索ボタン -->
    <div class="search-menu-button menu-button">
      <input id="search-menu-input" type="checkbox" class="display-none">
      <label id="search-menu-open" class="menu-open" for="search-menu-input">
        <span class="search-menu-icon menu-icon"></span>
        <span class="search-menu-caption menu-caption"><?php _e( '検索', THEME_NAME ) ?></span>
      </label>
      <label class="display-none" id="search-menu-close" for="search-menu-input"></label>
      <div id="search-menu-content" class="search-menu-content">
        <?php //検索フォーム
        get_template_part('searchform') ?>
      </div>
    </div>
  <?php endif ?>
ブルー隊長
ブルー隊長

お~ここをカスタマイズすれば良いんだね?

.Red
.Red

そういう事です!

これを下記のコードに置き換えてください。

 

  <!-- 検索ボタン -->
  <div class="search-menu-button menu-button">
    <a href="tel:09000000000">
      <div class="search-menu-icon menu-icon"></div>
      <div class="search-menu-caption menu-caption"><?php _e( '真実の愛', THEME_NAME ) ?></div>
    </a>
  </div>

 

.Red
.Red

これで電話が掛けれるよ。

真実の愛が反映された

ブルー隊長
ブルー隊長

わし、何かやばい奴と関わってしまったのかも。怖い怖い怖い

 

 

  1. Cocoon親テーマから、mobile-menu-buttons.phpをダウンロードする。
  2. mobile-menu-buttons.phpを編集・保存する。
  3. 新たに空のtmpフォルダを作成する。
  4. tmpフォルダに編集したmobile-menu-buttons.phpを入れる。
  5. tmpフォルダごと、子テーマにアップロードする。場所は、
    wp-content/themes/cocoon-child-master/tmp
  6. 外観 → テーマの編集 → tmp → mobile-menu-buttons.phpを確認。

 

スライドインボタンのメニュー・ホーム・トップは、性質上書き換える人は居ないと思うが、スライドボタン時コンテンツ下のサイドバーを表示にチェックを入れれば、検索以外にサイドバーも書き換えしやすい候補になる。もちろんtelリンク以外にも、通常リンクも指定が可能だ。Cocoonのモバイルタブの設定画面

 

Cocoonのスライドボタンの画像アイコンを変更するカスタマイズ

ブルー隊長
ブルー隊長

おっさんおっさん。

電話は掛けれるよーになったけど、画像が虫眼鏡のままやで?

 

.search-menu-icon::before { content: '\f095'; }

 

.Red
.Red

CSSに張り付けてください。AMPのCSSにもね。

 

電話マークに置き換えできた

ブルー隊長
ブルー隊長

わーできたできた。おっさんありがとう!でもこの画像って、どこから獲ってきたん?

 

 

.Red
.Red

獲ってきたとは人聞きが悪いですね。

これはFontAwesomeで無料で使わせてもらってるんです。

好きなアイコンを選んで、アイコンページに行くと、

fontawesomeのアイコンページ

 

.Red
.Red

コードが表示されるんだ。このアイコンの場合だとf57bがそうだよ。

ただ、最新バージョンは使えないから注意が必要なんだ。

だから、このワイングラスは使えないよ。

代わりに、さっきCSSに書き込んだコードをf004に変更してみて!

.search-menu-icon::before { content: '\f004'; }

 

変更したアイコンの画像

ブルー隊長
ブルー隊長

何も言えねーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

.Red
.Red

おかしいな?

ホントに3日位、上の画像の状態なのに

誰からも電話が掛かってこないよ?

サイトが出来たばっかだからかなぁ?

ブルー隊長
ブルー隊長

いやいや、普通に怖いでしょ。。。

誰が、電話できるんだこれ?

Cocoonには、最初からFontAwesomeが使えるようになっている。至れり尽くせりですね。ただし、最新バージョンは使用できないので、注意してください。

この記事のまとめ

この記事では、Cocoonのスマホ固定メニューをカスタマイズしていきました。リンクは電話リンクにしましたが、指定リンクを指定することもできます。その場合、必要が無くなる作業が出てきますので、必要のない作業は省いて行っていただくことで、対応していただけます。長文を最後まで読んでいただきありがとうございました!

 

.Red
.Red

で、隊長、独立するって言ってたけど、どんな仕事ですか?

ブルー隊長
ブルー隊長

出張マッサージ

.Red
.Red

エロい!

コメント

トップへ戻る