menu
menu

キーワード検索

 

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

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 4-) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 7↑) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  6. ( 5↓) 【jQuery入門】jQueryで日時を表示
  7. (10↑) 【HTML5】HTML5・ページ作成の基本
  8. ( 9↑) 【MySQL】Windows 10にMySQLをインストール
  9. ( 8↓) 【Mac Tips】MacにInkscapeをインストール
  10. ( 6↓) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション

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

  • Labs

WordPress

こんにちは(・∀・)

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

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

ウィジェット一覧

ウィジェット一覧

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

ウィジェット一覧

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

テーマの中にある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' );

こんな感じになります。

ウィジェット一覧

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

ウィジェット一覧

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


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

  • カテゴリー:Labs