WordPressのテーマには多くのものがあります。
中でも無料のテーマでStingerがとても有名です。
かつ、
SEO的にも優れています。
また、
カスタマイズ性にも良いです。
そこで、 Stinger6、Stinger7のfooter部分にWidget(ウィジェット)を追加する方法です。
まずは、
function.phpを開きます。
(必ずバックアップしてから編集してくださいネ!!もし画面が真っ白になった場合でもFTPでバックアップしたものをアップロードすれば直りますので。)
その中に以下のコードを記載・記述します。
// フッターウィジェット追加
register_sidebar( array(
'id' => 'footer-left',
'name' => 'フッター左',
'before_widget' => '<ul><li>',
'after_widget' => '</li></ul>',
'before_title' => '<h4 class="menu_underh2">',
'after_title' => '</h4>',
));
register_sidebar( array(
'id' => 'footer-center',
'name' => 'フッター中央',
'before_widget' => '<ul><li>',
'after_widget' => '</li></ul>',
'before_title' => '<h4 class="menu_underh2">',
'after_title' => '</h4>',
));
register_sidebar( array(
'id' => 'footer-right',
'name' => 'フッター右',
'before_widget' => '<ul><li>',
'after_widget' => '</li></ul>',
'before_title' => '<h4 class="menu_underh2">',
'after_title' => '</h4>',
));
//ここまで
その後、
一度管理画面よりfooter部分にWidget(ウィジェット)が追加されたか確認します。
(しなくてもいいですが^^;)一応です)
追加されていることを確認できたら、
最後にCSSでスタイルを調整します。
その前に、
footer.phpを以下のように変更します。
<footer id=”footer”>
この一番上のfooter部分の下に以下のコードを追記します。
<!–フッターウィジェット–>
<aside>
<ul><?php dynamic_sidebar('footer-left'); ?></ul>
<ul><?php dynamic_sidebar('footer-center'); ?></ul>
<ul><?php dynamic_sidebar('footer-right'); ?></ul>
</aside>
<!–/フッターウィジェット–>
<div class="clear">
次に、
</footer>
部分を以下のようにします。
</div>
</footer>
最後に、 CSSでフッターの横並びを解除する為に以下のように、CSSで調整します。
でないと、
フッターメニューがウィジェットの横に長細く表示されてしまいます。
なので、divタグで横並びをクリアします。
CSS
/*——————————–
フッターウィジェット
———————————*/
footer>aside ul {
float:left;
width: 310px;
padding: 10px;
list-style-type:none;
}
.clear {
clear:both; /*floatの解除*/
}
これで、
以下のように表示されるようになります。
参考サイト)
「Stinger6, Stinger7, WordPress, カスタマイズ, カスタマイズ, テーマ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧
あなたにおすすめ
-
新型コロナウイルス感染症は本当でしょうけれど本当なのか…
本当に、どうなっているのか・・・。 わからないテレビというメデイアに洗脳されているのか。そうではないのか。 でも、現実に患者さんはいる。 軽症から重症まで。 どこまでが真実なのか。 洗脳なのか。
-
WordPressでAdSense広告を任意の場所に表示させる方法
WordPressでAdSenseコードを任意の場所に挿入する方法です。 <!--more-->タグの後に必然的にアドセンス広告を表示させる方法と、 ショートコード化して任意の場所にアドセ…
-
空いてる時間を有効活用し、スキマ時間にお金を稼ぐそんな1つの方法
(アイキャッチ画像はマクロミルサイトのスクリーンショットです。) 私が13年前にとあるメーカーを退社したのと同時くらいに多くの正社員の募集人員があったマクロミルという会社があります。 現在では、インタ…
-
php WordPress カスタマイズ カスタマイズ テーマ 伝えたいこと 備忘録
rss2.php編集版RSSフィードにアイキャッチ画像を表示する方法
何度も何度も申し訳ありません。どうしてもRSSフィードにアイキャッチ画像を表示させたくて邁進している所存でございます。。。。先日にも再度検証してコードを修正したりいくつかの方法を記載いたしました。その…
-
Stinger6 Stinger7 WordPress カスタマイズ 備忘録
続、プラグインなしでコンタクトフォームを作成方法
先日、 WordPressでプラグインを使わないでお問い合わせ(先)フォーム(コンタクトフォーム)の作成する方法を記載しました。 (プラグインなし) WordPressプラ…
おすすめの記事一部広告
- エクストレイルリアワイパー交換方法と純正部品番号9
- カーメイトのエンジンスターターでエラー15表示と対処方法6
- シガーライターがない車にシガーライターソケットの付け方と増設方法4
- ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法2
- エクストレイルT32おすすめエアコンフィルター交換方法2
- エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ2
- セレナとエクストレイルのエコモーター(オルタネーター)のリコールと車検2
- MG3530が壊れたのでMG3630と比較した評価レ PV2
- WAKO'Sエンジンオイル添加剤SUPERHVはかなりおすすめです1
- 左クリックチャタリングと接触不良富士通マウスM-U0019分解方法1
おすすめ!!
世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!
Googleニュース
2024-04-27
国土交通省の「事業用軽自動車の共同使用」(※2)についての通達を受け、この度新サービスをリリース。2023年3月にスタートした軽貨物メンテナンスパックサービス ...
2024-04-27
CBcloudは、自社が保有する車両を代車として配送パートナーに一時的に提供することで、車検や修理時にも業務を継続できるよう支援する。 国交省は3月に、「貨物 ...
2024-04-26
趣味、車修理・自動車整備については高橋巨樹におまかせ! 車修理・自動車整備に関するご相談や困りごとなどを解決する高橋巨樹プロのコラムは必見。 今回の ...
2024-04-26
日本版 “ライドシェア”がスタート 愛車をメンテナンスし出発式に. 一般のドライバーが自家用車を使って有料で人を運ぶ「日本版ライドシェア」が、4月26日から ...
2024-04-26
... 車ながら丁寧にメンテナンスして長く愛されている。車離れと言われる20代の若者も注目する「ヤングタイマー」(1980年代から2000年代ごろの車を指す言葉)も ...
Total257
Stinger6、Stinger7のfooter部分にWidget(ウィジェット)を追加する方法です。
まずは、
function.phpを開きます。
(必ずバックアップしてから編集してくださいネ!!もし画面が真っ白になった場合でもFTPでバックアップしたものをアップロードすれば直りますので。)
その中に以下のコードを記載・記述します。
// フッターウィジェット追加
register_sidebar( array(
'id' => 'footer-left',
'name' => 'フッター左',
'before_widget' => '<ul><li>',
'after_widget' => '</li></ul>',
'before_title' => '<h4 class="menu_underh2">',
'after_title' => '</h4>',
));
register_sidebar( array(
'id' => 'footer-center',
'name' => 'フッター中央',
'before_widget' => '<ul><li>',
'after_widget' => '</li></ul>',
'before_title' => '<h4 class="menu_underh2">',
'after_title' => '</h4>',
));
register_sidebar( array(
'id' => 'footer-right',
'name' => 'フッター右',
'before_widget' => '<ul><li>',
'after_widget' => '</li></ul>',
'before_title' => '<h4 class="menu_underh2">',
'after_title' => '</h4>',
));
//ここまで
その後、
一度管理画面よりfooter部分にWidget(ウィジェット)が追加されたか確認します。
(しなくてもいいですが^^;)一応です)
追加されていることを確認できたら、
最後にCSSでスタイルを調整します。
その前に、
footer.phpを以下のように変更します。
<footer id=”footer”>
この一番上のfooter部分の下に以下のコードを追記します。
<!–フッターウィジェット–>
<aside>
<ul><?php dynamic_sidebar('footer-left'); ?></ul>
<ul><?php dynamic_sidebar('footer-center'); ?></ul>
<ul><?php dynamic_sidebar('footer-right'); ?></ul>
</aside>
<!–/フッターウィジェット–>
<div class="clear">
次に、
</footer>
部分を以下のようにします。
</div>
</footer>
最後に、 CSSでフッターの横並びを解除する為に以下のように、CSSで調整します。
でないと、
フッターメニューがウィジェットの横に長細く表示されてしまいます。
なので、divタグで横並びをクリアします。
CSS
/*——————————–
フッターウィジェット
———————————*/
footer>aside ul {
float:left;
width: 310px;
padding: 10px;
list-style-type:none;
}
.clear {
clear:both; /*floatの解除*/
}
これで、
以下のように表示されるようになります。
参考サイト)
CSSでフッターの横並びを解除する為に以下のように、CSSで調整します。
でないと、
フッターメニューがウィジェットの横に長細く表示されてしまいます。
なので、divタグで横並びをクリアします。
CSS
/*——————————–
フッターウィジェット
———————————*/
footer>aside ul {
float:left;
width: 310px;
padding: 10px;
list-style-type:none;
}
.clear {
clear:both; /*floatの解除*/
}
これで、
以下のように表示されるようになります。
新型コロナウイルス感染症は本当でしょうけれど本当なのか…
本当に、どうなっているのか・・・。 わからないテレビというメデイアに洗脳されているのか。そうではないのか。 でも、現実に患者さんはいる。 軽症から重症まで。 どこまでが真実なのか。 洗脳なのか。
WordPressでAdSense広告を任意の場所に表示させる方法
WordPressでAdSenseコードを任意の場所に挿入する方法です。 <!--more-->タグの後に必然的にアドセンス広告を表示させる方法と、 ショートコード化して任意の場所にアドセ…
空いてる時間を有効活用し、スキマ時間にお金を稼ぐそんな1つの方法
(アイキャッチ画像はマクロミルサイトのスクリーンショットです。) 私が13年前にとあるメーカーを退社したのと同時くらいに多くの正社員の募集人員があったマクロミルという会社があります。 現在では、インタ…
php WordPress カスタマイズ カスタマイズ テーマ 伝えたいこと 備忘録
rss2.php編集版RSSフィードにアイキャッチ画像を表示する方法
何度も何度も申し訳ありません。どうしてもRSSフィードにアイキャッチ画像を表示させたくて邁進している所存でございます。。。。先日にも再度検証してコードを修正したりいくつかの方法を記載いたしました。その…
Stinger6 Stinger7 WordPress カスタマイズ 備忘録
続、プラグインなしでコンタクトフォームを作成方法
先日、 WordPressでプラグインを使わないでお問い合わせ(先)フォーム(コンタクトフォーム)の作成する方法を記載しました。 (プラグインなし) WordPressプラ…
- エクストレイルリアワイパー交換方法と純正部品番号9
- カーメイトのエンジンスターターでエラー15表示と対処方法6
- シガーライターがない車にシガーライターソケットの付け方と増設方法4
- ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法2
- エクストレイルT32おすすめエアコンフィルター交換方法2
- エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ2
- セレナとエクストレイルのエコモーター(オルタネーター)のリコールと車検2
- MG3530が壊れたのでMG3630と比較した評価レ PV2
- WAKO'Sエンジンオイル添加剤SUPERHVはかなりおすすめです1
- 左クリックチャタリングと接触不良富士通マウスM-U0019分解方法1
おすすめ!!
世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!
2024-04-27
国土交通省の「事業用軽自動車の共同使用」(※2)についての通達を受け、この度新サービスをリリース。2023年3月にスタートした軽貨物メンテナンスパックサービス ...
2024-04-27
CBcloudは、自社が保有する車両を代車として配送パートナーに一時的に提供することで、車検や修理時にも業務を継続できるよう支援する。 国交省は3月に、「貨物 ...
2024-04-26
趣味、車修理・自動車整備については高橋巨樹におまかせ! 車修理・自動車整備に関するご相談や困りごとなどを解決する高橋巨樹プロのコラムは必見。 今回の ...
2024-04-26
日本版 “ライドシェア”がスタート 愛車をメンテナンスし出発式に. 一般のドライバーが自家用車を使って有料で人を運ぶ「日本版ライドシェア」が、4月26日から ...
2024-04-26
... 車ながら丁寧にメンテナンスして長く愛されている。車離れと言われる20代の若者も注目する「ヤングタイマー」(1980年代から2000年代ごろの車を指す言葉)も ...
よろしかったらシェアよろしくお願いします。
[…] Stinger6のフッターに3カラムのウィジェットを追加する方法 […]