実際のカスタマイズをチェックしないとわからないんですね。画像を見ても、HTMLやstyleの指定が見えないので案内があったりします。

不具合・カスタマイズ対象ページのURLを提示してください

情報が少なく申し訳ございません

URLは

presidentあああ

あああhouse.net

です。あああ、は消してください。

親テーマの

mobile-menu-buttons

で文字の変更をしたのみで崩れてしまいました。

よろしくお願いいたします。

phpのカスタマイズは、サポート対応外になるんですね。検索したので結果だけこのページにもまとめておきますね。

• １．モバイルボタンに変更を加えたいより

スライドインボタンを使用しているのですが、「メニュー」のボタンを消去したいです。

CSSでスライドインのmenuボタンを非表示にする場合は、以下のとおりをstyle.cssの『768px以下』の項目内に追記する感じです。

/*768px以下*/
@media screen and (max-width: 768px){
 /*必要ならばここにコードを書く*/
 .navi-menu-button {
 display: none;
 }
}

※AMPにも対応したい場合、amp.cssにも追記が必要です。

※現在はamp.cssには追記は不要です。

• ２．モバイル用のスライドインボタンメニューをカスタマイズする方法より

モバイル用のスライドインボタンメニューを

メニュー・ホーム・検索・トップ・サイドバー

という表示から

メニュー・ホーム・電話・メール・サイドバー

という表示に変更したいと思っています。

• 親テーマtmp/mobile-menu-buttons.phpをPC上にダウンロード

PC上でtmpフォルダを作成し、その中にダウンロードしたmobile-menu-buttons.phpを入れる

https://github.com/yhira/cocoon/blob/master/tmp/mobile-menu-buttons.php#L58

https://notepad.pw/245y792

ここを編集したら、今度は子テーマフォルダ内にアップロードする感じです。

<a class="search-menu-button menu-button" href="https://wp-cocoon.com"><span class="search-menu-icon menu-icon"></span><span class="search-menu-caption menu-caption">検索</span></a>

検証画面上でしか試してないのでどうなるか不明ですが、こんな感じでイケるかもしれません。

以下は電話番号に変更したり

href="https://wp-cocoon.com"

『検索』という文字列を『電話』に変更したり。ほかスタイ

• ３．モバイル下のメニュー内容を変更できますか？より

現在はメニュー、ホーム、検索、トップ、サイドバーになっているのを、並び順と他の内容にがある事はできますか？

例えばサイドバーをこちらで作った固定ページのカテゴリーに変える事はできますか？

親テーマにあるtmp/mobile-menu-buttons.phpをカスタマイズする感じです。

手順としては

1. 親テーマフォルダ内にあるtmp/mobile-menu-buttons.phpをダウンロード
2. PC上でtmpフォルダを作成
3. そのフォルダ内にmobile-menu-buttons.phpファイルを入れる
4. 子テーマフォルダ内にアップロード

スライドインの『メニュー、ホーム、検索、トップ、サイドバー』の並び順の変更方法

メニューボタン

https://github.com/yhira/cocoon/blob/master/tmp/mobile-menu-buttons.php#L14

ホームボタン

https://github.com/yhira/cocoon/blob/master/tmp/mobile-menu-buttons.php#L50

これらを移動させる感じです。

次.

スマホ下にあるスライドインの左端、メニューの項目を『独自のリンク』に変更するカスタマイズ方法。

って感じについて

https://github.com/yhira/cocoon/blob/master/tmp/mobile-menu-buttons.php#L15

上記の『div class="navi-menu-button menu-button"』をaタグで囲ってしまったら良いと思います。

<a href="#" class="navi-menu-button menu-button"> <span class="navi-menu-icon menu-icon"></span><span class="navi-menu-caption menu-caption">メニュー</span></a>

ナビの≡を変更するのはCSSで可能かと思われます。

ついで。

スマホ下にあるスライドインの真ん中『検索』の項目を『独自のリンク』に変更するカスタマイズ方法。

としては、

モバイル用のスライドインボタンメニューをカスタマイズする方法

に書いてる通りです。

• 親テーマtmp/mobile-menu-buttons.phpをPC上にダウンロード

PC上でtmpフォルダを作成し、その中にダウンロードしたmobile-menu-buttons.phpを入れる

https://github.com/yhira/cocoon/blob/master/tmp/mobile-menu-buttons.php#L58

https://notepad.pw/245y792

ここを編集したら、今度は子テーマフォルダ内にアップロードする感じです。

<a class="search-menu-button menu-button" href="https://wp-cocoon.com"><span class="search-menu-icon menu-icon"></span><span class="search-menu-caption menu-caption">検索</span></a>

検証画面上でしか試してないのでどうなるか不明ですが、こんな感じでイケるかもしれません。

以下は電話番号に変更したり

href="https://wp-cocoon.com"

『検索』という文字列を『電話』に変更したり。ほかスタイルの修正は必要かと思いますが、参考程度に。

とりあえず、検索でヒットするれば良いかな。っと試して見ました。

• ４．スライドインの項目を変えるより

項目を削除したりCSSでデザインや文字を変えたりなどは、

• スライドインボタンのカスタマイズ
• CocoonスライドインのNaviメニュー！背景など可愛くカスタマイズするCSS
• モバイルボタンに変更を加えたい

これらの記事を見て把握できたのですが、リンク先を変えたり項目を増やしたりする方法が分かりませんでした。

1. ホームボタンを違うURLに
2. 項目を６つに変更

ホームボタンを違うURLに

https://github.com/yhira/cocoon/blob/master/tmp/mobile-menu-buttons.php#L52

<?phpecho home_url(); ?>

この部分を違うurlにすれば良いと思います。

<a href="https://wp-cocoon.com/community/" class="menu-button-in">

子テーマで反映させるには、tmpフォルダ内に親テーマからダウンロードしたmobile-menu-buttons.phpを入れて、子テーマフォルダ内にアップロードする感じです。

項目を６つに変更

上記リンク先<div class="mobile-menu-buttons">のようにdivで囲み1つ項目を追加したうえで装飾すれば良いと思います。

PHPを触ってスライドインの文字列を変更したら、空白ができた時

とりあえずこちらのホームボタンをコピペして、それぞれリンク先のURLを変更して並べてみたのですが、文字列を変えると下に空白ができてしまいます。分かりにくいですが空白の下に文字があります。

https://wp-cocoon.com/community/cocoon-theme/%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%A4%E3%83%B3%E3%81%AE%E9%A0%85%E7%9B%AE%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B/

<

div class="home-menu-caption menu-caption">ここに書いてない</div

>

これが原因で、文字を入れたら良いと思います。

 

あとソースコードは以下に貼り付けて、そのリンクを置いてくださいね。

https://notepad.pw/

これ以上はリンク先をチェックしないと分かりません❦

よくある質問をまとめさせていただきました。時間かかった（笑）

今回は、mobile-menu-buttonsのPHPを触ったので、4番目のリスト『PHPを触ってスライドインの文字列を変更したら、空白ができた時』かも知れません。

• 実際にPHPはブラウザで見えないので、サポート外だったりします。

簡単な方法はPHPのカスタマイズをやめて、CSSで非表示にする方法。リスト1番目『メニューボタンをけしたい』が簡単ですよ。

かうたっく様

お忙しい中たくさんの情報ありがとうございます。

いろいろ試し試しやってみてまたご報告させていただきます。

本当にありがとうございます。