リオラボ
icon

【テンプレ集】WordPressフッター作成方法&サンプル【自作テーマ/Bootstrap】

この記事ではBootstrapを使ったフッター(footer.php)の作成方法と、サンプルとしてテンプレート集を紹介しています。

WordPress自作テーマ全体の作成方法については以下の記事を参照ください。

【サンプルテーマ配布】WordPress自作テーマの作り方完全版【Bootstrap活用】

【サンプルテーマ配布】WordPress自作テーマの作り方完全版【Bootstrap活用】

Posted on 9月 14, 2024 | Category: WordPress

この記事ではWordPress自作テーマの作り方完全版ということで、自作テーマの基本から実際の構築方法について詳しく解説しています。また、サンプルテーマを配…

footer.phpの作り方

WordPressではfooter.phpに上記のような記述をします。コード内にはwp_footer() 関数、BootstrapのJavaScript、そしてbody 部分を閉じ、htmlタグで HTMLドキュメント全体を閉じるよう記述してください。

footerタグの中を以下で紹介するサンプルと書き換えてください。

フッターのテンプレート集

フッター作成にはBootstrapを利用します。header.phpなどで必要なBootstrapのライブラリを読み込んでいる前提で進めていきます。ライブラリの読み込みがよくわからない場合はこちらの記事で確認してください。

基本的にBootstrapのみで構成されており、レスポンシブにも対応しています。

シンプルなフッター

サンプル

特にフッターに表示したいものがない場合、上記のようにシンプルに設定することもできます。

各リンクを配置したフッター

サンプル

こちらもシンプルなデザインですが、各リンクを配置しています。

リンクやソーシャルアイコンなどを設置

サンプル

もう少し要素を増やしたい場合、上記のように記述してみましょう。ソーシャルアイコンにはFont Awesomeを使っています。

地図を埋め込んだフッター

サンプル

Googleマップの埋め込み地図を使うことで、簡単に地図を表示することができます。Googleマップから表示したい地図を検索し、iframe コードをコピーすることで利用が可能です。

このフッターに関してはCSSでデザインを調整しています。