WordPress

WordPress ウィジェットエリアを作ってみる

更新日:

WordPressでネットショップのサイトを作っているのはいいが、全ページ共通の「お買い物ワンポイント」などの項目を掲載したい時があります。

使用するテーマによってはウィジェットが付いてるのですが・・・今回は無し

  • Indexページ下
  • 投稿(商品)ページ下
  • 固定ページ下
  • リストページ下

とかに欲しいですよね

テーマに無かったら作るしかない

あまり、PHPとかは弄りたくは無いのだが挑戦してみました

functions.php でウィジェットエリアを作る

今回のテーマではサイドバーだけ三つのウィジェットエリアがついてました

先のページ下にはないんです

今回参考にさせてもらったサイト

http://webnonotes.com/wordpress/addwidget/

 

さて、はじめよう

外観 ⇒ テーマの編集 ⇒ functions.php の編集

開いたのはいいがあまり弄りたくないしな💦

でも進む・・・

目的のエリア発見!!

参考サイトに書いてあったのはコレだな

register_sidebar(array(
 'name' => __( 'Main sidebar', 'welcart_basic_square' ),
 'id' => 'side-widget-area1',
 'description' => __( 'Widget area of common', 'welcart_basic_square' ),
 'before_widget' => '<section id="%1$s" class="widget %2$s">',
 'after_widget' => '</section>',
 'before_title' => '<h3 class="widget_title">',
 'after_title' => '</h3>',
 ));

これが3つ書いてある

これをコピーして下の方へペーストでいいんだな・・・たぶん

ペーストした後、赤文字に変更

 register_sidebar( array(
 'name' => __( 'one_foter' ),
 'id' => 'one_foter1',
 'description' => __( 'my wedgit aria' ),
 'before_widget' => '<div id="%1$s" class="widget %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3 class="widget-title">',
 'after_title' => '</h3>',
 ));

 

descriptionは日本語でもよさそうなんだけど・・・

とりあえずこのまま保存!!

ウィジェット できてるか確認

できてました マイ ウィジェット エリアが

まあここのウィジェットはいつも通りにドラッグで追加したりできます

 

さて、これを表示させねばいけません

 

front-page.php へ表示場所を作る

またまたPHPです💦

これはテーマによって異なってくると思われますので同じではないかもしれません。

なんとかそれらしいところを探します

たぶん下の方です

何度か間違ったところに表示されてしまい💦

落ち着きました

</div><!-- .grid -->
<?php endif; ?>
<?php dynamic_sidebar( 'one_foter' ) ;?>
</div><!-- .column -->
 </div><!-- column-wrap -->
 </div><!-- #content -->
 </div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

たったこれだけで、サイトにもしっかり表示されるようになりました

 

ふ~

 

この後スマホで見たら画面からはみ出てしまったので

もう一つスマホ用のウィジエットエリアを作って条件分岐で表示させることに成功

 

</div><!-- .grid -->
<?php endif; ?>
<?php if ( wp_is_mobile() ) : ?>
 <?php dynamic_sidebar( 'one_foter2' ) ;?>
 <?php else: ?>
 <?php dynamic_sidebar( 'one_foter' ) ;?>
 <?php endif; ?>
</div><!-- .column -->
 </div><!-- column-wrap -->
 </div><!-- #content -->
 </div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

  • Indexページ下
  • 投稿(商品)ページ下
  • 固定ページ下
  • リストページ下

全部同じようにつけちゃいました

まあ、結果オーライでいいかな(笑)

今回は仕方なかったけどあまりPHPとか弄りたくないもんですな・・・

 

いきなりはじめるPHP ワクワク・ドキドキの入門教室 [ 谷藤賢一 ]

価格:1,944円
(2017/6/1 22:34時点)
感想(16件)

  • この記事を書いた人
  • 最新記事

-WordPress
-, , ,

Copyright© TWS-ch , 2019 All Rights Reserved.