menu
menu

キーワード検索

 

11月更新・前月(10月)の人気記事トップ10 - 11/10/2019

  1. ( 2 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 6 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  3. ( 1 ↓) 【CSS】CSSだけでドロップダウンメニュー
  4. (圏外↑) 【Mac】外付けメディアが取り外せなくなったらSpotlightの除外項目を設定してみる
  5. ( 5 - ) 【Mac】Finderにフォルダのフルパスを表示させる方法
  6. ( 7 ↑) 【Mac】Safariでソースコードを見る方法
  7. ( 10 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  8. (圏外↑) 【Mac】iMovieの保存場所を変更する
  9. ( 4 ↓) 【制作Tips】iPhone画面解像度まとめ
  10. ( 8 ↓) 【制作Tips】画面解像度一覧表
このエントリーをはてなブックマークに追加

【WordPress】ワードプレスのウィジェット表示スペースの追加

【WordPress】ワードプレスのウィジェット表示スペースの追加

こんにちは(・∀・)

ワードプレスのウィジェットの追加方法についてです。

デフォルトのテーマでは通常2個か3個のウィジェットの表示スペースがあります。しかしそれでは足りないという方はウィジェットの表示スペースを追加することができます。

ワードプレスのウィジェット表示スペースの追加

ウィジェット一覧

【WordPress】ワードプレスのウィジェット表示スペースの追加

ウィジェット表示スペース

【WordPress】ワードプレスのウィジェット表示スペースの追加

コンテンツサイドバーの検索ウィジェットをヘッダーに持っていきたい、でもカテゴリーはサイドバーに置いておきたい。なのでヘッダー用のウィジェット表示スペースを作って、そこに検索ウィジェットを入れてしまおう、という事です。

テーマの中にあるfunctions.phpを開いてregister_sidebarというコードのかたまりを探します。


register_sidebar( array(
'name'          => __( 'Primary Sidebar', 'twentyfourteen' ),
'id'            => 'sidebar-1',
'description'   => __( 'Main sidebar that appears on the left.', 'twentyfourteen' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget'  => '</aside>',
'before_title'  => '<h1 class="widget-title">',
'after_title'   => '</h1>',
) );

register_sidebarのコードのかたまりを見つけたらそこにヘッダー用をもう一つ作って追加します。

テーマtwentyfourteenの場合

function twentyfourteen_widgets_init() {
require get_template_directory() . '/inc/widgets.php';
register_widget( 'Twenty_Fourteen_Ephemera_Widget' );

register_sidebar( array(
'name'          => __( 'Primary Sidebar', 'twentyfourteen' ),
'id'            => 'sidebar-1',
'description'   => __( 'Main sidebar that appears on the left.', 'twentyfourteen' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget'  => '</aside>',
'before_title'  => '<h1 class="widget-title">',
'after_title'   => '</h1>',
) );
register_sidebar( array(
'name'          => __( 'Content Sidebar', 'twentyfourteen' ),
'id'            => 'sidebar-2',
'description'   => __( 'Additional sidebar that appears on the right.', 'twentyfourteen' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget'  => '</aside>',
'before_title'  => '<h1 class="widget-title">',
'after_title'   => '</h1>',
) );
register_sidebar( array(
'name'          => __( 'Footer Widget Area', 'twentyfourteen' ),
'id'            => 'sidebar-3',
'description'   => __( 'Appears in the footer section of the site.', 'twentyfourteen' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget'  => '</aside>',
'before_title'  => '<h1 class="widget-title">',
'after_title'   => '</h1>',
) );
/*ヘッダー用追加コードここから*/
register_sidebar( array(
'name'          => __( 'ヘッダーウィジェットエリア' ),//変更
'id'            => 'sidebar-4',//変更
'description'   => __( '' ),//削除してもこのままでもOK
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget'  => '</aside>',
'before_title'  => '<h1 class="widget-title">',
'after_title'   => '</h1>',
) );
/*ヘッダー用追加コードここまで*/
}
add_action( 'widgets_init', 'twentyfourteen_widgets_init' );

こんな感じになります。

【WordPress】ワードプレスのウィジェット表示スペースの追加

コンテンツサイドバーにある検索ウィジェットをヘッダーウィジェットエリアに移動。

【WordPress】ワードプレスのウィジェット表示スペースの追加

あとはheader.phpのお好きな場所に<?php dynamic_sidebar( 'sidebar-4' ); ?>を貼り付けるだけです。


いかがでしたでしょうか、ウィジェットの追加は思っていたよりも簡単にできてしまいました。あとはお好みに合わせてウィジェットのカスタマイズをしてみてはいかがでしょうか。

  • PHP5 WordPress
このエントリーをはてなブックマークに追加