皆さま、おはようございます、こんにちは、こんばんわ。.Redと申します。
今日もよろしこお願いします！
よろしこって何やねんｗ
あっ。そーそーおっさんに聞きたい事があるんだぞ
ん？何ですか？
一人ボッチを楽しむ方法ならいくらでも教えてあげれるよ。
あふぉか！わしはおっさんと違ってモテるんやで？
一人ボッチになれる方法なら聞きたいけどな。わはははははー草っ草生える
- 時代はスマホだぜーって人
- モバイルの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のスマホ固定メニューをカスタマイズしていきました。リンクは電話リンクにしましたが、指定リンクを指定することもできます。その場合、必要が無くなる作業が出てきますので、必要のない作業は省いて行っていただくことで、対応していただけます。長文を最後まで読んでいただきありがとうございました！
で、隊長、独立するって言ってたけど、どんな仕事ですか？
出張マッサージ
エロい！
コメント