【Luxeritas】スマホ用モバイルメニューの検索、前へ、次へを削除する方法

ブログ

WordPress のアイコン

この記事では、WordPress のテーマLuxeritas(ルクセリタス)で、スマホのモバイル用メニューの検索、前へ、次へを削除する方法について書きます。

豪華バージョンのモバイルメニューカスタマイズ

親テーマにある「navi.php」を子テーマにコピーして、中身を編集することで、モバイルメニューの項目をカスタマイズできます。

モバイルメニューってのは、スマホでブログを見た時に、右上に表示されている展開できるヘッダーメニューのことです。タップするとメニュー、サイドバー、前へ、次へ、検索が表示されます。

Luxeritas のモバイルメニュー

この中にある一部の不要な項目を非表示にしてみます。CSS で表面上非表示にするのではなく、根本から削除する方法です。

本記事は、Luxeritas を使っていて、なおかつグローバルナビのモバイルメニューの種類を「豪華バージョン(on screen)」にしている方向けの内容です。

カスタマイズ(外観) - モバイルメニューの種類

不要な項目の削除

Luxeritas テーマにある「navi.php」というファイルの中身を編集します。

子テーマのluxech フォルダーにはないので、まずは親テーマのluxeritas からファイルをコピーします。

サーバー上のファイルをコピーできるようにFTP やレンタルサーバーにあるファイルマネージャー機能を使います。

ナポリタン寿司は、ConoHa を利用しているので、ConoHa に標準実装されているファイルマネージャー機能を使ってみます。

ConoHa のコントロールパネルにアクセスして、サイト管理 → ファイルマネージャーに進みます。

ConoHa - サイト管理

サーバーにアクセスしたら、以下の場所に移動します。

/public_html/〇〇〇/wp-content/themes/luxeritas/

「navi.php」というファイルを探します。

ConoHa のファイルマネージャー

見つけたら、右クリック → コピー をクリックします。

navi.php のコピー

続いて、以下の場所に移動します。

/public_html/naporitansushi.com/wp-content/themes/luxech

luxech フォルダーを開いたら、空いているところを右クリック → ペースト でファイルを貼り付けます。

luxech に貼り付け

貼り付けたファイルを右クリック → ファイル編集 → ACE Editor をクリックします。

navi.php の右クリック - ファイル編集

ファイルをコピーできたら、WordPress からでも編集できるようになります。こちらのエディター画面の方が見慣れている・使いやすいという場合は、こちらを利用しましょう。

管理画面にアクセスして、外観 → テーマエディター をクリックします。

WordPress - 外観 - テーマエディター

編集できるテーマを選択の部分が、「Luxeritas Child Theme」になっていることを確認します。

右側メニューの中から、先ほどコピーした「navi.php」があるのでクリックします。中央のエディター画面に中身が表示されます。

テーマファイル

エディターを開いたら、以下の文章を探します。

<ul class="mobile-nav">
<?php
if( $luxe['global_navi_mobile_type'] === 'luxury' ) {
?>
<li class="mob-func"><span><?php echo $awesome['menu']; ?></span></li>
<?php
}
?>
<li class="mob-menu" title="<?php echo __( 'Menu', 'luxeritas' ) ?>"><?php echo $awesome['menu']; ?><p><?php echo __( 'Menu', 'luxeritas' ) ?></p></li>
<?php
if( isset( $luxe['column_style'] ) && $luxe['column_style'] !== '1column' ) {
?>
<li class="mob-side" title="<?php echo __( 'Sidebar', 'luxeritas' ) ?>"><?php echo $awesome['sidebar']; ?><p><?php echo __( 'Sidebar', 'luxeritas' ) ?></p></li>
<?php
}
?>
<li class="mob-prev" title="<?php echo __( ' Prev ', 'luxeritas' ) ?>"><?php echo $awesome['double-arrow-left']; ?><p><?php echo __( ' Prev ', 'luxeritas' ) ?></p></li>
<li class="mob-next" title="<?php echo __( ' Next ', 'luxeritas' ) ?>"><?php echo $awesome['double-arrow-right']; ?><p><?php echo __( ' Next ', 'luxeritas' ) ?></p></li>
<li class="mob-search" title="<?php echo __( 'Search', 'luxeritas' ) ?>"><?php echo $awesome['search']; ?><p><?php echo __( 'Search', 'luxeritas' ) ?></p></li>
<?php
if( isset( $luxe['pwa_enable'] ) && isset( $luxe['pwa_offline_enable'] ) && isset( $luxe['pwa_install_button'] ) ) {
?>
<li class="mob-install" id="thk_pwa_install" title="<?php echo __( 'Install', 'luxeritas' ) ?>" style="display:none"><?php echo $awesome['install']; ?><p><?php echo __( 'Install', 'luxeritas' ) ?></p></li>
<?php
}
?>
</ul>

これが、モバイルメニューの項目です。「<li class="〇〇〇"」という風に、それぞれの項目が記載されています。

モバイルメニュー(豪華バージョン)の構成
mob-menuメニュー
mob-sideサイドバー
mob-prev前へ
mob-next次へ
mob-search検索

つまり、この中から不要な項目を削除すれば、モバイルメニューで表示されなくなります。

例えば、前へ、次へ、検索を非表示にする場合は、以下の行を丸ごと削除します。

<li class="mob-prev" title="<?php echo __( ' Prev ', 'luxeritas' ) ?>"><?php echo $awesome['double-arrow-left']; ?><p><?php echo __( ' Prev ', 'luxeritas' ) ?></p></li>
<li class="mob-next" title="<?php echo __( ' Next ', 'luxeritas' ) ?>"><?php echo $awesome['double-arrow-right']; ?><p><?php echo __( ' Next ', 'luxeritas' ) ?></p></li>
<li class="mob-search" title="<?php echo __( 'Search', 'luxeritas' ) ?>"><?php echo $awesome['search']; ?><p><?php echo __( 'Search', 'luxeritas' ) ?></p></li>
147行目~149行目を削除

丸ごと削除したら、以下のような画面になります。

削除した後のnavi.php
// メニュー
<li class="mob-menu" title="<?php echo __( 'Menu', 'luxeritas' ) ?>"><?php echo $awesome['menu']; ?><p><?php echo __( 'Menu', 'luxeritas' ) ?></p></li>

// サイドバー
<li class="mob-side" title="<?php echo __( 'Sidebar', 'luxeritas' ) ?>"><?php echo $awesome['sidebar']; ?><p><?php echo __( 'Sidebar', 'luxeritas' ) ?></p></li>

// 前へ
<li class="mob-prev" title="<?php echo __( ' Prev ', 'luxeritas' ) ?>"><?php echo $awesome['double-arrow-left']; ?><p><?php echo __( ' Prev ', 'luxeritas' ) ?></p></li>

// 次へ
<li class="mob-next" title="<?php echo __( ' Next ', 'luxeritas' ) ?>"><?php echo $awesome['double-arrow-right']; ?><p><?php echo __( ' Next ', 'luxeritas' ) ?></p></li>

// 検索
<li class="mob-search" title="<?php echo __( 'Search', 'luxeritas' ) ?>"><?php echo $awesome['search']; ?><p><?php echo __( 'Search', 'luxeritas' ) ?></p></li>

下記のように、コメントアウト化することでも機能を無効にできます。いつか使いたくなるかも…と不安な方は、以下のように非表示にしたい項目の前後を記号で囲みましょう。

<?php
/* 以下、コメントアウト化(機能の無効化)
<li class="mob-prev" title="<?php echo __( ' Prev ', 'luxeritas' ) ?>"><?php echo $awesome['double-arrow-left']; ?><p><?php echo __( ' Prev ', 'luxeritas' ) ?></p></li>
<li class="mob-next" title="<?php echo __( ' Next ', 'luxeritas' ) ?>"><?php echo $awesome['double-arrow-right']; ?><p><?php echo __( ' Next ', 'luxeritas' ) ?></p></li>
<li class="mob-search" title="<?php echo __( 'Search', 'luxeritas' ) ?>"><?php echo $awesome['search']; ?><p><?php echo __( 'Search', 'luxeritas' ) ?></p></li>
コメントアウト終了 */
?>

カスタマイズが失敗した場合

「うまい具合にいかない!」、「余計なところを消してしまった!」という時は、子テーマにコピーしたnavi.php を削除します。

navi.php の削除

親テーマにあるnavi.php を子テーマにコピーして、一からやり直しましょう。親テーマを直接編集するのではなく、子テーマにコピーすることで、バックアップの役割も果たしているってわけですね。

【余談】CSS で角丸化

当サイトは、全体的なデザインを角丸にしています。

そこで、モバイルメニューも角丸にしてみました。

CSSでメニューを角丸にする前と後の比較画像

CSS は、以下のようになっています。

/*モバイル用ヘッダーメニュー角丸化*/
@media screen and (max-width: 991px) {
  #gnavi ul.mobile-nav {
    border-radius: 10px;
  }
}

「border-radius: 10px;」の数字を調整することで角丸具合を変更できます。10pxだと角丸すぎる場合は、5pxとかにしてみましょう。

子テーマの編集のスタイルシート37行目以降に記述すれば、OKです。

子テーマの編集 - スタイルシート

まとめ

以上、Luxeritas(ルクセリタス)で、豪華バージョンのモバイルメニューをカスタマイズする方法についてでした。

Posted by ナポリタン寿司