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

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

<?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 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>
/アドレスエリア-->

<!--アドレスエリア【アドレスを非表示に】

<?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>

/アドレスエリア-->

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

コメントアウトに関しては
以下の記事を参考にしてください。
→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>
<!--/フッターメニュー-->

<?php

get_globalmenu_keni('footermenu1');

get_globalmenu_keni('footermenu2');

</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>
/フッターメニュー-->

<!--フッターメニュー【非表示に】

<?php

get_globalmenu_keni('footermenu1');

get_globalmenu_keni('footermenu2');

</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>',
	) );
}

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>
<!--▲フッター-->

<!--アドレスエリア【非表示に】

<?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>

/アドレスエリア-->

<!--フッターメニュー【非表示に】

<?php

get_globalmenu_keni('footermenu1');

get_globalmenu_keni('footermenu2');

</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;
}

#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{

float: none;

width: 100%;

margin-bottom: 2em;

}

↓編集後

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

#footer .area01,

#footer .area02,

#footer .area03{

float: none;

width: 100%;

margin-bottom: 2em;

}

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

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

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

[賢威6]

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

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

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

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

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

苗字（漢字で）
メールアドレス

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

コメントを残す

あなたにおすすめの記事はこちら！

運営者プロフィール

富山一史と申します。私は妻と2人の娘がいる4人家族のパパです。
→ 詳しいプロフィールはこちら

ちょっと前までは普通のサラリーマンでしたが、給料以上の副収入をブログから稼ぎ続け、2018年12月に独立しました！

ブログを使って稼ぐ方法を、このAFFIKATSUサイト内で詳しく紹介していますので見てみてください。

副業でもできるブログを使った稼ぎ方を知らないのは損です！！

（「もっと早く知りたかった」と後悔させてしまうと思います。私もそうでしたので）

▶ アドセンス収益公開(月収入)
※初心者から月収40万円までの8ヶ月の記録とその後を紹介しています。

↓アドセンス報酬だけでも
合計2000万円以上（更新中）

また、今ではブログだけじゃなく、リアルビジネスも含め様々なビジネスを手掛け、月収1000万円以上稼ぐ月もあります。

記事閲覧中に疑問点や不明点などありましたらご連絡ください。多くの方にわかりやすいサイトになるよう心がけています。
（お問い合わせフォーム）

また、真面目に頑張る方には最大限のサポートをしていきますので、どんどん私を頼ってください！
※楽して稼ごうと考えている方や礼儀のない方は連絡しないでください。

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

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

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

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

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

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

コメントを残す

あなたにおすすめの記事はこちら！

サイト内検索

運営者プロフィール

ブログ初心者向けの書籍を出版しました！

資産ブログの作り方をまとめたガイドブックを無料でゲットする！

数万円～数十万円の簡単なお小遣い稼ぎはこちら！

カテゴリー

最近の投稿

最近のコメント

サイト内検索

おすすめのWordPressテーマ

1日22万PV以上集客してる様子を公開！