Welcart対応テーマ「Twentyfour Seven」でフッターメニュー項目を変更する方法

当サイトで販売しているWelcart対応テーマ「Twentyfour Seven」のフッターメニュー項目のカスタマイズ方法について紹介します。
「外観＞メニュー」でのカスタマイズ方法は、他のテーマでも当てはまる箇所あるかと思いますので、ご参考にしてください。

ヘッダーのメニュー変更はこちら

Contents

2 「外観＞メニュー」からのカスタマイズ方法

2.1 オリジナルフッターメニューの作成と項目の追加方法

2.2 メニュー項目欄にないオリジナルのリンク先を追加する方法

2.3 追加設定オプションを使った表示

3 CSSによるデザインのカスタマイズ方法

デフォルトの各メニュー項目の表示条件

先にデフォルトで表示されるフッターメニュー項目についてですが、それぞれ表示条件があります。

「お知らせ一覧」

1つでも「お知らせ」を投稿（公開）している。
カスタマイザー「お知らせページ関連＞お知らせページの表示/非表示」の選択を「表示する」にしている。

「プライバシーポリシー」

デフォルトで表示。

「特定商取引法に基づく表記」

デフォルトで表示。

「Back to Top」

デフォルトで表示。

また、「お知らせ」「Back to Top」のテキスト部分はカスタマイザーから変更可能です。

「外観＞メニュー」からのカスタマイズ方法

最も簡単な方法になります。
レイアウトを変えない項目のみの変更であればこちらのやり方で大丈夫かと思います。HTMLやPHPの知識がなくてもカスタマイズ可能です。

こちらの方法は、テーマによって対応しているものとそうでないものがあります。

オリジナルフッターメニューの作成と項目の追加方法

WordPressの管理画面にログインし、「外観＞メニュー」と移動します。
「メニュー構造」の「メニュー名」欄に任意の名前（管理用なので日本語OK）を入力し、「メニュー設定」の「メニュー位置」で「フッターメニュー」をチェック、「メニュー作成」ボタンをクリック。
画面遷移後、メニュー項目が追加できるようになっているので「メニュー項目を追加」欄から追加したいリンク先のページをチェックし「メニュー追加」ボタンをクリック。
追加完了後、「メニュー構造」の「メニューを保存」ボタンをクリックして完了です。

デフォルトのフッターメニュー項目に戻したい場合は、「メニュー構造」の下部にある「メニューを削除」で作成したメニューを消すことで、戻せます。

メニュー項目欄にないオリジナルのリンク先を追加する方法

別サイトへのリンク等、メニュー項目欄にないリンク先も追加できます。

「メニュー項目を追加」欄の「カスタムリンク」をクリック。
「URL」と「リンク文字列」を入力、「メニュー追加」ボタンをクリックで追加されます。

「Back to Top（ページの先頭に戻る）」リンクを追加したい場合は、「URL」の欄に#と任意の「リンク文字列」を入力してカスタムリンクを追加してください。

追加設定オプションを使った表示

フッターメニューの場合、追加設定オプション内の項目「ナビゲーションラベル」「説明」は下記のように表示されます。

ナビゲーションラベルのテキスト / 説明

追加設定オプションの設定方法は、

「メニュー構造」欄に追加された各メニュー項目の右側の矢印「▼」をクリックし追加設定オプションを表示。
「ナビゲーションラベル」に左側のテキスト、「説明」に右側のテキストを入力。
各項目設定完了後、「メニューを保存」ボタンをクリックして完了です。

「説明」が表示されていない場合は、ページ上部の「表示オプション」をクリックし、「説明」をチェックすることで表示できます。

CSSによるデザインのカスタマイズ方法

こちらの方法は、CSSの知識が必要になります。
メニュー項目の文字の大きさや色、またはレイアウト等を変更することができます。

見出しタグの微調整

「外観＞カスタマイズ」と移動し、「追加CSS」をクリック。
CSSの入力欄が表示されるので、そこにCSSコードを入力、「公開」をクリックで完了です。

カスタム用CSSのサンプルコード

#footer .footerMenu li {
    font-weight: bold; /* 太字に変更 */
    font-size: 16px; /* 文字サイズ変更 */
    color: #444; /* 文字色変更 */
}

今後変更があるかもしれないので、フッターメニュー項目に割り当てられているクラス名等はソースコードからご確認ください。

関数の上書きによるカスタマイズ方法

こちらの方法は、HTMLやPHPの知識が必要になります。
メニューを出力している関数を書き換えて、オリジナルの配置・構造のメニューにカスタマイズにする方法です。
「子テーマ」もしくは「カスタマイズ用プラグイン」を導入する必要があります。テンプレートをご用意していますので、下記ページからダウンロードしてください。

フッターメニューを出力している関数は、テーマファイルの「functions ＞ parts ＞ footer_content.php」内の下記コードになるので

<?php
/* コピーライト＆メニュー */
if(!function_exists('tfs_parts_footer_menu')){
function tfs_parts_footer_menu($TFSglobal,$TFSsettingGlobal,$IDorName){
- 省略 -
}
}
?>

こちらをコピーして上書きします。
子テーマでのカスタマイズであれば、子テーマ内に「footer_content.php」を親テーマからコピーして追加し、tfs_parts_footer_menuの関数を書き換えてもカスタマイズできますが、テーマ更新時に「footer_content.php」内の他関数もアップデートされなくなるので、「functions.php」に下記のようなコード追加での部分的カスタマイズを推奨します。

関数上書きのサンプルコード

例えば、メニュー項目を「Back to Top」のみにするのであれば

<?php
function tfs_parts_footer_menu( $TFSglobal,$TFSsettingGlobal,$IDorName ) {
extract($TFSglobal);
extract($TFSsettingGlobal);
?>
<ul class="footerMenu">
<li><a href="#" id="pageToTop"><span class="textBackToTop"><abbr title="ページの先頭に戻る"><?php echo $textBackToTop; ?></abbr></span><img src="<?php echo $directoryUrl; ?>/img/chevron-up-solid.svg" width="17" height="12" alt="ページの上に戻る" class="iconDefault marginLeft4px" decoding="async"></a></li>
</ul>
<?php
}
?>

というように、先程「- 省略 -」とあった箇所に、表示したい内容を記述すればOKです。上のコードでは?>と<?phpで囲うことでHTMLで記述できるようにしています。extract($TFSglobal);とextract($TFSsettingGlobal);は$textBackToTopや$directoryUrlの値が入っているグローバル関数を使用できるようにしています。
PHPで記述したい場合は、表示したい内容をechoしてください。

<?php
function tfs_parts_header_menu_pc( $TFSglobal,$TFSsettingGlobal,$IDorName ) {
$footerContent = '<ul class="footerMenu">
<li><a href="#" id="pageToTop"><span class="textBackToTop"><abbr title="ページの先頭に戻る">'.$textBackToTop.'</abbr></span><img src="'.$directoryUrl.'/img/chevron-up-solid.svg" width="17" height="12" alt="ページの上に戻る" class="iconDefault marginLeft4px" decoding="async"></a></li>
</ul>';
echo $footerContent ;
}
?>

また、フッター左側のコピーライト部分は下記のコードになるので、表示させたい場合はtfs_parts_footer_menuの関数内に残しておきましょう。

<span class="CopyrightBox">
- 省略 -
</span>

以上です、
また、ヘッダーのメニュー項目も同じような方法で変更できます。