menu
menu

キーワード検索

 

前月(11月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 3 - ) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 4 - ) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 6 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  6. ( 5 ↓) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  7. ( 9 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  8. ( 8 - ) 【CSS】レスポンシブデザインのブレークポイントは⁉
  9. (10 ↑) 【Mac】iMovieの保存場所を変更する
  10. ( - ↑) 【PHP】PHPでシンプルなメールフォーム
このエントリーをはてなブックマークに追加

【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
このエントリーをはてなブックマークに追加