当サイトで販売しているWelcart対応テーマ「Twentyfour Seven」のヘッダーメニュー項目のカスタマイズ方法について紹介します。
部分的に他のテーマでも当てはまる箇所あるかと思いますので、ご参考にしてください。
デフォルトの各メニュー項目の表示条件
先にデフォルトで表示されるヘッダーメニュー項目についてですが、それぞれ表示条件があります。
「ONLINE SHOP / 製品一覧」
- 1つでも「製品」を登録（公開）している。
- カスタマイザー「オリジナル機能 ＞ アイテム一覧ページをトップページにする」にチェックしていない。
「ARCHIVE / アーカイブ一覧」
- 1つでも「投稿」を登録（公開）している。
- カスタマイザー「アーカイブページ関連 ＞ アーカイブページの表示/非表示」の選択を「表示する」にしている。
「CONTACT / お問い合わせ」
- カスタマイザー「お問い合わせページ ＞ お問い合わせページの表示/非表示」の選択を「表示する」にしている。
また、「製品」「アーカイブ」「ARCHIVE」のテキスト部分はカスタマイザーから変更可能です。
「外観 ＞ メニュー」からのカスタマイズ方法
最も簡単な方法になります。
レイアウトを変えない項目のみの変更であればこちらのやり方で大丈夫かと思います。HTMLやPHPの知識がなくてもカスタマイズ可能です。また、ウインドウサイズが小さくなった時に表示されるハンバーガーメニュー内の項目も同時に変更されます。
こちらの方法は、テーマによって対応しているものとそうでないものがあります。
オリジナルヘッダーメニューの作成と項目の追加方法
- WordPressの管理画面にログインし、「外観 ＞ メニュー」と移動します。
- 「メニュー構造」の「メニュー名」欄に任意の名前（管理用なので日本語OK）を入力し、「メニュー設定」の「メニュー位置」で「ヘッダーメニュー」をチェック、「メニュー作成」ボタンをクリック。
- 画面遷移後、メニュー項目が追加できるようになっているので「メニュー項目を追加」欄から追加したいリンク先のページをチェックし「メニュー追加」ボタンをクリック。
- 追加完了後、「メニュー構造」の「メニューを保存」ボタンをクリックして完了です。
デフォルトのヘッダーメニュー項目に戻したい場合は、「メニュー構造」の下部にある「メニューを削除」で作成したメニューを消すことで、戻せます。
メニュー項目欄にないオリジナルのリンク先を追加する方法
別サイトへのリンク等、メニュー項目欄にないリンク先も追加できます。
- 「メニュー項目を追加」欄の「カスタムリンク」をクリック。
- 「URL」と「リンク文字列」を入力、「メニュー追加」ボタンをクリックで追加されます。
デフォルトのように2行でメニューを表示する方法
デフォルトの「英語」と「日本語」という感じで、メニューを2行で表示することも可能です。
- 「メニュー構造」欄に追加された各メニュー項目の右側の矢印「▼」をクリックし追加設定オプションを表示。
- 「ナビゲーションラベル」に1行目（大きく表示される文字：デフォルトでは英語）、「説明」に2行目（小さく表示される文字：デフォルトでは日本語）を入力。
- 各項目設定完了後、「メニューを保存」ボタンをクリックして完了です。
「説明」が表示されていない場合は、ページ上部の「表示オプション」をクリックし、「説明」をチェックすることで表示できます。
CSSによるデザインのカスタマイズ方法
こちらの方法は、CSSの知識が必要になります。
メニュー項目の文字の大きさや色、またはレイアウト等を変更することができます。
見出しタグの微調整
- 「外観 ＞ カスタマイズ」と移動し、「追加CSS」をクリック。
- CSSの入力欄が表示されるので、そこにCSSコードを入力、「公開」をクリックで完了です。
カスタム用CSSのサンプルコード
.globalMenuPc li {
font-weight: bold; /* 太字に変更 */
}
.globalMenuJP {
font-size: 16px; /* 文字サイズ変更 */
color: #444; /* 文字色変更 */
}今後変更があるかもしれないので、ヘッダーメニュー項目に割り当てられているクラス名等はソースコードからご確認ください。
「追加CSS」については下記記事でも、「保存場所」や「セレクタの指定優先度」等も踏まえて説明しています。
関数の上書きによるカスタマイズ方法
こちらの方法は、HTMLやPHPの知識が必要になります。
メニューを出力している関数を書き換えて、オリジナルの配置・構造のメニューにカスタマイズにする方法です。
「子テーマ」もしくは「カスタマイズ用プラグイン」を導入する必要があります。テンプレートをご用意していますので、下記ページからダウンロードしてください。
ヘッダーメニューを出力している関数は、テーマファイルの「functions ＞ parts ＞ header_content.php」内の下記コードになるので
<?php
/* メニューPC */
if(!function_exists('tfs_parts_header_menu_pc')){
function tfs_parts_header_menu_pc($TFSglobal,$TFSsettingGlobal,$IDorName){
- 省略 -
}
}
?>こちらをコピーして上書きします。
子テーマでのカスタマイズであれば、子テーマ内に「header_content.php」を親テーマからコピーして追加し、tfs_parts_header_menu_pcの関数を書き換えてもカスタマイズできますが、テーマ更新時に「header_content.php」内の他関数もアップデートされなくなるので、「functions.php」に下記のようなコード追加での部分的カスタマイズを推奨します。
関数上書きのサンプルコード
例えば、メニュー項目を見出しタグに変更する場合で簡単に説明すると
<?php
function tfs_parts_header_menu_pc( $TFSglobal,$TFSsettingGlobal,$IDorName ) {
?>
<h3>ここに見出しタイトル</h3>
<?php
}
?>というように、先程「- 省略 -」とあった箇所に、表示したい内容を記述すればOKです。上のコードでは?>と<?phpで囲うことでHTMLで記述できるようにしています。
PHPで記述したい場合は、表示したい内容をechoしてください。
<?php
function tfs_parts_header_menu_pc( $TFSglobal,$TFSsettingGlobal,$IDorName ) {
$headText = '<h3>ここに見出しタイトル</h3>';
echo $headText;
}
?>また、カートアイコン・検索アイコン・会員アイコン・ハンバーガーメニューアイコンは下記のコードになるので、表示させたい場合はtfs_parts_header_menu_pcの関数内に残しておきましょう。
<?php
/* メニューアイコン（カート・検索・会員） */
$device = 'pc';
$displayPosition = 'header';
tfs_parts_header_menu_icon($TFSglobal,$TFSsettingGlobal,$device,$displayPosition,$IDorName); //from：functions/parts/other_content.php
?><!-- ハンバーガーメニューアイコン -->
<button class="navToggle" aria-label="メニューを表示">
<span></span><span></span><span></span>
</button>以上です、
また、フッターのメニュー項目も同じような方法で変更できます。
Welcart対応テーマ「Twentyfour Seven」
販売価格 29,700円（税込）WordPressでオンラインショップを構築できるプラグイン「Welcart」向けに開発されたテーマです。
