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

よろしこって何やねんw
あっ。そーそーおっさんに聞きたい事があるんだぞ

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

あふぉか!わしはおっさんと違ってモテるんやで?
一人ボッチになれる方法なら聞きたいけどな。わはははははー草っ草生える
- 時代はスマホだぜーって人
- モバイルのfooterに固定されたナビメニューをカスタマイズしたい人
- スマホ依存症の人
- 電話が鳴らなくて寂しい人

何だこれ?2番目以外どーでもいいし
Cocoon設定のモバイルタブの設定

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

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

footerのスライドインボタンの事ですね。
Cocoon設定のモバイルタブから変更できますよ。
スライドインボタンを選択すれば良いですよ。

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

そーそーこれこれ。最初は表示されてたんだよね。
何かhtmlとか書かんとあかんかなって思ったけど助かったぜ。
聞くまでもなかったな。
スマホのフッター固定ナビメニューから電話を掛けるカスタマイズ

んでな、わし独立する事にしたんよ。
だから、固定ナビから電話が掛けれるようにしたいんYA!
<a href="tel:090○○○○○○○○">090-○○○○-○○○○</a>
で、電話掛けれるのは知ってるんやけど。。。

独立ですか?随分唐突ですねー。(大丈夫かなぁ・・・)
確かに企業サイトなんかだと電話リンクは需要がありますね。
- スマートフォン端末以外ではtelリンクを無効にする。
- スマートフォン端末以外は tel: リンククリック時のイベントを無効化する。
- スライドインボタンのリンクを、電話リンクに変更する。
Cocoonのフッターメニューの文字とリンクを変更するカスタマイズ - Cocoonのスライドボタンの画像アイコンを変更するカスタマイズ
電話リンクはこちらの記事を参考にさせていただきました。

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

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

外観 → テーマの編集 → tmp-userにhead-insert.phpがあるね。
あれ?何かエラーが出て書き込み出来ないけど?

うん。直接は編集出来ないんだよ。
だから一度、FTPソフトで、head-insert.phpをデスクトップにダウンロードしてね。カスタマイズする時は必ずバックアップも取っておいてね。
/hogehoge.com/public_html/wp-content/themes/cocoon-child-master/tmp-user
にあるから、ダウンロードしてね。

head-insert.phpに、下記を記載してください。プリーズ!
scriptタグを前後に入れてね。
$(function(){ var ua = navigator.userAgent; if(ua.indexOf('iPhone') < 0 && ua.indexOf('Android') < 0){ $('.telhref span').each(function(){ $(this).unwrap(); }); } });

オッケーできたよ。
で、これを元の場所にアップロードするのね?

そーです。あぷっロードできたら、
外観 → テーマの編集 → tmp-userにhead-insert.php
を確認してみよう。

大事なところ噛んでるし。
オッケーできたよ。
- PHPは管理画面で直接編集できない。サーバーからダウンロードして編集。
- ダウンロードしたPHPは、編集する前にバックアップを取っておこう。
スマートフォン端末以外は tel: リンククリック時のイベントを無効化する。

次はCSSをいじって行くよ。
これは外観 → テーマの編集 →スタイルシート
で直接編集できるお。下のコードを追加してね。
a[href^="tel:"] { cursor: default; }

これで、スマートフォン端末以外は、
tel: リンククリック時のイベントを無効化できるんだね?
スライドインボタンのリンクを、電話リンクに変更する。

後は、下記の電話を掛けるhtmlを画像に指定するんだ。
余計なお世話だけど、本文中バナーにも指定できるお。
<a href="tel:090○○○○○○○○">090-○○○○-○○○○</a>

バナーは本文だから分かるけど、
スライドインのボタンの指定ってどこでするの?

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

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

先にそれぞれのスライドインボタンを見ておこう。
検索ボタンよ、君の名は。
- メニュー:navi-menu-button
- ホーム:home-menu-button
- 検索:search-menu-button
- トップ:top-menu-button
- サイドバー:sidebar-menu-button

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

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

三葉は、 search-menu-buttonは、
mobile-menu-buttons.phpに居るよ!

ん?どこにも居ないよ?

うん。子テーマには居ないから、
親テーマからダウンロードするんだ。
/hogehoge.com/public_html/wp-content/themes/cocoon-master/tmpにあるから、
ダウンロードしてね。
Cocoonのフッターメニューの文字とリンクを変更するカスタマイズ

それでは早速、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 ?>

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

そういう事です!
これを下記のコードに置き換えてください。
<!-- 検索ボタン -->
<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>

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

わし、何かやばい奴と関わってしまったのかも。怖い怖い怖い
- Cocoon親テーマから、mobile-menu-buttons.phpをダウンロードする。
- mobile-menu-buttons.phpを編集・保存する。
- 新たに空のtmpフォルダを作成する。
- tmpフォルダに編集したmobile-menu-buttons.phpを入れる。
- tmpフォルダごと、子テーマにアップロードする。場所は、
wp-content/themes/cocoon-child-master/tmp - 外観 → テーマの編集 → tmp → mobile-menu-buttons.phpを確認。

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

おっさんおっさん。
電話は掛けれるよーになったけど、画像が虫眼鏡のままやで?
.search-menu-icon::before { content: '\f095'; }

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

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


コードが表示されるんだ。このアイコンの場合だとf57bがそうだよ。
ただ、最新バージョンは使えないから注意が必要なんだ。
だから、このワイングラスは使えないよ。
代わりに、さっきCSSに書き込んだコードをf004に変更してみて!
.search-menu-icon::before { content: '\f004'; }

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

おかしいな?
ホントに3日位、上の画像の状態なのに
誰からも電話が掛かってこないよ?
サイトが出来たばっかだからかなぁ?

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

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

出張マッサージ

エロい!
コメント