賢威フッターメニューの非表示カスタマイズ!ウィジェット化も

賢威のデフォルト状態では、
以下のように「フッターアドレス」部分に
サンプル画像と謎の住所が表示された状態
になっています。
賢威 フッター メニュー 非表示 カスタマイズ ウィジェット化 アドレス sample 住所 京都
 

また、「フッターアドレス」の右側に
「フッターメニュー」も表示されています。
賢威フッターメニュー

※メニューはヘッダー部(ページ上部)の
 メニューと同じものが表示。

今回は
賢威のフッターの「アドレス」と
「メニュー」の項目を非表示にする
カスタマイズ方法を紹介します。

また、
フッターをウィジェット化して、
サイドバーのようにカスタマイズできる
方法も紹介します。

賢威フッターメニューの非表示カスタマイズ

「アドレス」部分の非表示と
「フッターメニュー」部分の非表示
のカスタマイズ方法を順番に紹介します。

賢威フッターアドレスの非表示カスタマイズ方法

WordPressのダッシュボードにある
「外観」→「テーマエディター」をクリックします。
WordPressの外観のテーマエディター
 

「フッター(footer.php)」をクリック。
賢威 フッター メニュー 非表示 カスタマイズ ウィジェット化 外観 テーマ編集 フッター footer.php
 

「footer.php」内の
以下の部分を編集します。

↓編集前

<!--アドレスエリア-->
<div class="area01">
<h3><?php echo the_keni('footer_left_title'); ?></h3>
<div class="access">
<div class="area01-freebox">
<?php
	if (the_keni('author_image') != "") {
		echo '<p><img src="'.the_keni('author_image')."\" alt=\"".the_keni('author_image_alt')."\" /></p>\n";
	}
	if (the_keni('author_info') != "") {
		echo nl2br(the_keni('author_info'));
	}
?>
</div>
</div>
</div>
<!--/アドレスエリア-->

↓編集後

<!--アドレスエリア【アドレスを非表示に】
<div class="area01">
<h3><?php echo the_keni('footer_left_title'); ?></h3>
<div class="access">
<div class="area01-freebox">
<?php
	if (the_keni('author_image') != "") {
		echo '<p><img src="'.the_keni('author_image')."\" alt=\"".the_keni('author_image_alt')."\" /></p>\n";
	}
	if (the_keni('author_info') != "") {
		echo nl2br(the_keni('author_info'));
	}
?>
</div>
</div>
</div>
/アドレスエリア-->

※コメントアウトを利用しています。

コメントアウトに関しては
以下の記事を参考にしてください。
html入門!初心者のための基本タグ一覧

 
編集したら
【ファイルを更新】をクリックします。
賢威 フッター メニュー 非表示 カスタマイズ ウィジェット化 外観 テーマエディター ファイルを更新
 

これで以下のように
「アドレス」の部分が非表示になります。
賢威 フッター メニュー 非表示 カスタマイズ ウィジェット化 アドレスを非表示

賢威フッターメニューの非表示カスタマイズ方法

「アドレス」の非表示と同じように
「フッターメニュー」の非表示の設定
を行います。

「footer.php」内の
以下の部分を編集します。

↓編集前

<!--フッターメニュー-->
<div class="area02">
<h3><?php echo the_keni('footer_right_title'); ?></h3>
<div class="footer-menu">
<?php	
get_globalmenu_keni('footermenu1');
get_globalmenu_keni('footermenu2');
?>
</div>
</div>
<!--/フッターメニュー-->

↓編集後

<!--フッターメニュー【非表示に】
<div class="area02">
<h3><?php echo the_keni('footer_right_title'); ?></h3>
<div class="footer-menu">
<?php	
get_globalmenu_keni('footermenu1');
get_globalmenu_keni('footermenu2');
?>
</div>
</div>
/フッターメニュー-->

編集したら
【ファイルを更新】をクリックします。
賢威 フッター メニュー 非表示 カスタマイズ ウィジェット化 外観 テーマエディター ファイルを更新
 

これで以下のように
「フッターメニュー」も非表示になります。
賢威 フッター メニュー 非表示 カスタマイズ ウィジェット化 アドレスとフッターメニューを非表示

賢威のフッターカスタマイズはウィジェット化がおすすめ

まず、フッターの役割を確認します。

いくつかサイトを見てみると、
フッターには一般的に以下のような項目が
記載されています。

  • 自己紹介・プロフィール
  • カテゴリ
  • twitter
  • 問い合わせ
  • メニュー
  • 最新記事一覧
  • プライバシーポリシー
  • 特定商取引法に基づく表記

など。

このような内容をサイドバーに
表示しているサイトもあります。
 

サイドバーでもフッターでも
自由自在に編集しやすいよう、
サイドバーと同じようにフッターも
ウィジェット化すると便利です。
 

サイドバーとフッターに表示させる項目を
行ったり来たり簡単に編集できるように
なるのでおすすめです。

クリック率や登録率の
検証もしやすくなります。
 

デフォルトのウィジェットは
以下のようにサイドバーとサブコンテンツ
の項目しかありません。
賢威 フッター メニュー 非表示 カスタマイズ ウィジェット化 サイドバー サブコンテンツ
 

今回紹介するフッターをウィジェット化する
カスタマイズを行うと、以下のように
フッターの項目が追加されます。
賢威 フッター メニュー 非表示 カスタマイズ ウィジェット化 サイドバー サブコンテンツ フッター追加
 

それでは、
フッターをウィジェット化する
カスタマイズ方法を紹介します。

ただし、今回紹介する方法は
「functions.php」を編集します。

編集を間違うとサイトが
見れなくなる可能性もある
ため、

FTPソフトが使えない方は
危険ですので注意してください。

FTPソフトの使い方は以下を参照ください。
FFFTPとは?新規ホスト(サーバーパスワード)の設定や使い方!

 
ダッシュボードの「外観」
→「テーマエディター」
→「テーマのための関数(functions.php)」
をクリック。
賢威 フッター メニュー 非表示 カスタマイズ ウィジェット化 外観 テーマの編集 functions.php
 

「functions.php」内に以下の
色付き部分(19~42行目)を追加します。

function keni_widgets_init() {
	register_sidebar( array(
		'name' => __( 'サイドバー' ),
		'id' => 'sidebar',
		'before_widget' => '<div id="%1$s" class="contents widget-conts %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3>',
		'after_title' => '</h3>',
	) );

	register_sidebar( array(
		'name' => __( 'サブコンテンツ' ),
		'id' => 'sub-contents',
		'before_widget' => '<div id="%1$s" class="contents widget-conts %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3>',
		'after_title' => '</h3>',
	) );
	register_sidebar( array(
		'name' => __( 'フッター1' ),
		'id' => 'footer-area01',
		'before_widget' => '<div id="%1$s" class="contents widget-conts %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3>',
		'after_title' => '</h3>',
	) );
	register_sidebar( array(
		'name' => __( 'フッター2' ),
		'id' => 'footer-area02',
		'before_widget' => '<div id="%1$s" class="contents widget-conts %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3>',
		'after_title' => '</h3>',
	) );
	register_sidebar( array(
		'name' => __( 'フッター3' ),
		'id' => 'footer-area03',
		'before_widget' => '<div id="%1$s" class="contents widget-conts %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3>',
		'after_title' => '</h3>',
	) );
}

追加したら【ファイルを更新】をクリック。
賢威 フッター メニュー 非表示 カスタマイズ ウィジェット化 外観 テーマエディター ファイルを更新
 

まだウィジェットに
フッターの項目は追加されてません。

次に「フッター(footer.php)」内を
編集します。

「footer.php」内に以下の
色付き部分(38~40行目)を追加します。

※既に上の設定で
 「アドレス」と「メニュー」が
 非表示になっていることを前提としています。

<!--▼フッター-->
<div id="footer">
<div id="footer-in">



<!--アドレスエリア【非表示に】
<div class="area01">
<h3><?php echo the_keni('footer_left_title'); ?></h3>
<div class="access">
<div class="area01-freebox">
<?php
	if (the_keni('author_image') != "") {
		echo '<p><img src="'.the_keni('author_image')."\" alt=\"".the_keni('author_image_alt')."\" /></p>\n";
	}
	if (the_keni('author_info') != "") {
		echo nl2br(the_keni('author_info'));
	}
?>
</div>
</div>
</div>
/アドレスエリア-->


<!--フッターメニュー【非表示に】
<div class="area02">
<h3><?php echo the_keni('footer_right_title'); ?></h3>
<div class="footer-menu">
<?php	
get_globalmenu_keni('footermenu1');
get_globalmenu_keni('footermenu2');
?>
</div>
</div>
/フッターメニュー-->

<div class="area01"><?php dynamic_sidebar( 'footer-area01' ); ?></div>
<div class="area02"><?php dynamic_sidebar( 'footer-area02' ); ?></div>
<div class="area03"><?php dynamic_sidebar( 'footer-area03' ); ?></div>
</div>
</div>
<!--▲フッター-->

追加したら【ファイルを更新】をクリック。
賢威 フッター メニュー 非表示 カスタマイズ ウィジェット化 外観 テーマエディター ファイルを更新
 

次に「design.css」内を編集します。

以下の色付き部分(1行目、13~21行目)
を追加します。

/*
#footer .area01{
	float: left;
	width: 39%;
	padding-bottom: 20px;
}

#footer .area02{
	float: right;
	width: 60%;
	padding-bottom: 20px;
}
*/
#footer .area01,
#footer .area02,
#footer .area03{
float: left;
width: 30%;
padding-bottom: 5px;
margin-right:10px;
}

追加したら【ファイルを更新】をクリック。
賢威 画像 サイズ はみ出す サイト幅 自動 変更 カスタマイズ 外観 テーマエディター ファイルを更新
 

これで以下のようにフッターを
ウィジェット化することができます。
賢威 フッター メニュー 非表示 カスタマイズ ウィジェット化 サイドバー サブコンテンツ フッター追加
 

また、スマホ表示の際に
3つのフッターを縦並びに
配置するように次の設定をします。

「mobile.css」内を編集します。

↓編集前

#footer .area01,
#footer .area02{
	float: none;
	width: 100%;
	margin-bottom: 2em;
}

↓編集後

#footer .area01,
#footer .area02,
#footer .area03{
	float: none;
	width: 100%;
	margin-bottom: 2em;
}

以上で全ての設定が完了です。

少し編集は面倒かもしれませんが、
一旦設定してしまえば後々楽になります。

これを機会に
設定しておくことをおすすめします。

最後まで読んで頂いてありがとうございました。

記事が価値あるものだと思われたら、
下のボタンからシェアをして頂けると嬉しいです。

ブログの始め方・稼ぎ方をまとめたガイドブックをプレゼント中!

↓↓↓メルマガ登録は下のフォームから↓↓

無料メールマガジン登録フォーム

メルマガ登録フォーム

苗字 (漢字で)
メールアドレス

※私からお送りする全てのメールに解除リンクを付けていますので、いつでもメルマガ解除をすることが可能です。




コメントを残す



コメントはサイト管理者が確認するまで表示されません。
他の読者さんにも有益だと判断した場合のみコメント対応を致します。

個別の問い合わせは【こちら】からお願いします。