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

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

公開日 / 更新日

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

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

  • 1つでも「お知らせ」を投稿(公開)している。
  • カスタマイザー「お知らせページ関連 > お知らせページの表示/非表示」の選択を「表示する」にしている。
  • デフォルトで表示。
  • デフォルトで表示。
  • デフォルトで表示。

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. 「外観 > カスタマイズ」と移動し、「追加CSS」をクリック。
  2. 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>

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

ウェルカート対応テーマのトゥエンティフォーセブン

Welcart対応テーマ「Twentyfour Seven」

販売価格 29,700(税込)

WordPressでオンラインショップを構築できるプラグイン「Welcart」向けに開発されたテーマです。

共有ボタン
Facebook Twitter LINE
関連キーワード
|
関連アーカイブへの矢印Twentyfour Seven/WordPressの関連アーカイブ
WordPress子テーマテンプレートの配布とインストール方法

WordPress子テーマテンプレートの配布とインストール方法

WordPressにおいて、テーマのテンプレートファイルの直接編集は、テーマ更新のタイミングで編集内容が上書きされてしまうので、有効化中のテーマを「親テーマ」と...

購入したWordPressテーマのインストール方法

購入したWordPressテーマのインストール方法

「TwentyfourSeven」の場合、テーマをインストールする前にカートプラグイン「Welcart」をインストールします。他のテーマの場合は、テーマのインス...

プラグイン「Connect Products with Shopify 」でShopifyとWordPressを連携させる方法

プラグイン「Connect Products with Shopify 」でShopifyとWordPressを連携させる方法

Shopifyの全商品を取得して、WordPressにカスタム投稿として自動登録するプラグイン作成しましたので連携方法をご紹介します。こちらのプラグインはWor...

WordPressテーマをオリジナルプラグインでカスタマイズする方法

WordPressテーマをオリジナルプラグインでカスタマイズする方法

WordPressにおいて、親テーマの直接編集はテーマが更新された際に上書きされてしまうので、テーマのカスタマイズは「子テーマ」を使うか「プラグイン」がおすすめ...

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

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

当サイトで販売しているWelcart対応テーマ「TwentyfourSeven」のヘッダーメニュー項目のカスタマイズ方法について紹介します。部分的に他のテーマで...