wordpress サイドバー 追加

サイドバーにコンテンツを追加するには「ウィジェット」を利用しますが、ウィジェットには様々な機能が用意されています。 その中に「固定ページ」ウィジェットがあります。 まずは表示させてみましょう。 サイドバーに表示させたい項目を選んでいただいて、 . WordPressのサイドバーをカスタマイズする方法を画像付きで細かくまとめました。WordPressのサイドバーに関してはこの記事を読めば、操作方法が完全に理解できます。サイドバーのカスタマイズ方法がイマイチよくわからないという方はこの記事でマスターしましょう! WordPressでサイドバーにカテゴリ一覧を表示させる方法. WordPressのサイドバーの編集は. WordPressサイドバーの設定【編集】 追加されたサイドバーは編集できますので、ボックス内に移動させたサイドバーに細かな編集を加えていきましょう。 WordPressのダッシュボード左メニュー『外観』→『ウィジェット』をクリック ・ウィジェット編集画面 WordPressを始めたばかりで、サイドバー(サイドエリア)の作り方やカスタマイズ方法がわからない。。最新記事やプロフィールなどを掲載したい!やり方を教えてー。そんな疑問にお答えします。 で定義したサイドバーを表示する場所に dynamic_sidebar() を記述してウィジェットを出力, ウィジェットの機能を有効化及びサイドバーを定義するために、register_sidebar() を使ってサイドバー(ウィジェットを表示するエリア)を定義して登録します。, register_sidebar() のパラメータはオプションですが、パラメータの id や name を指定することでそのサイドバーを出力の際に識別(特定)することができ、その他のオプションで出力するサイドバーのマークアップ(HTML)をカスタマイズすることができます。, また、register_sidebar() は内部で add_theme_support( 'widgets' ) を実行していてウィジェット機能を有効化します。, アクションフックに登録しなくても動作しますが、通常は widgets_init アクションフックのタイミングで実行するようにします。, register_sidebar() は functions.php に記述します。, id はサイドバーを出力する際に、どのサイドバーかを特定するために dynamic_sidebar() のパラメータで指定します。, また、id を指定しない場合、デバッグモードでは E_USER_NOTICE(注意メッセージ)が出力されます。, ※ register_sidebar() は widgets_init アクションフックのタイミングで実行するようにします。, 名前(name)を指定しない場合は、システムが自動的に「サイドバー1」などの名前を付けます。, 上記の例では指定していませんが、名前の他に説明(description)も指定しておくとウィジェット編集の際の管理がしやすくなります。, サイドバーは dynamic_sidebar() を使ってを出力しますが、出力される HTML をカスタマイズするには register_sidebar() のパラメータで指定します。, 例えば、前述のサイドバーの登録のように名前と ID だけを指定した場合、dynamic_sidebar() を使ってサイドバーを出力すると以下のような HTML が出力されます。, 上記のようにデフォルトではそれぞれのウィジェットを li 要素で囲んで出力されるので、デフォルトのサイドバーを出力する場合は dynamic_sidebar() を ul 要素で囲んで記述します。, 上記のように記述することで、以下のように ul/li 要素で正しくマークアップされるようになります。, パラメータを利用すれば、デフォルトで出力されるマークアップを変更することができます。, 以下は、register_sidebar() でパラメータを指定して、ウィジェットを囲む要素を

要素に変更し、ウィジェットのタイトルを囲む要素を

要素に変更して独自のクラスを指定する例です。, id 属性は単なる文字列で指定してしまうと、ウィジェットが複数ある場合に重複してしまうので注意が必要です。以下ではシステムが出力する ID(ウィジェット名+番号)を利用していますが、この値はウィジェットを再作成すると番号部分が変わってしまいます。, 上記の場合、ウィジェットを囲む要素を
要素に変更しているので、サイドバーを出力する際にテンプレートに
    を記述する必要はありません。, 初期値(名前や出力される要素など)はパラメータに値を指定することで変更することができます。, サイドバーの名前を指定します。ウィジェット管理画面に表示され、dynamic_sidebar() のパラメータの値として指定することができます(name または id を指定)。, 指定しない場合(デフォルト)は、「サイドバー1」などになります(数値はシステムが割り振る連番)。, サイドバーの ID を指定します。オプションですが、バージョン 4.2 以降デバッグモードで id を指定しない場合は以下のような E_USER_NOTICE(注意メッセージ)が出力さてしまうので、半角英数字の任意の文字列を指定します。, Notice: register_sidebar が誤って呼び出されました。「サイドバー 1」サイドバーの引数の配列で id が設定されませんでした。既定では「sidebar-1」です。id に「sidebar-1」を設定することでこの情報を消して、既存のサイドバーのコンテンツを保つことができます。, また、id は name 同様 dynamic_sidebar() のパラメータの値として指定することができます。, 管理画面のサイドバーに割り当てられる CSS クラスです。管理画面のソースコードのみに出力され、テンプレートファイルには出力されません。, 管理画面のサイドバーを囲む div 要素のクラスに sidebar-xxxx(xxxx は指定した文字列)のようなクラスが追加されます。, ウィジェットの直前に出力する HTML テキストを指定します。デフォルトでは li 要素が出力されるので、デフォルトの場合、dynamic_sidebar() を使ってウィジェットエリアを出力する際に ul 要素で囲む必要があります。, 以下はサイドバーにカテゴリーと固定ページのウィジェットを追加した場合にデフォルトで出力される HTML の例です。, 上記の例で before_widget に該当するのは、カテゴリーと固定ページのウィジェットを囲む以下のような li 要素です。id 属性には「ウィジェットの名前+番号」、class 属性には「widget widget_ウィジェットの名前」が付与されています。, id 属性と class 属性の値には以下のような変数が指定されていて、sprintf で値に変換されます。, 番号はシステムが自動的に付与するそれぞれのウィジェットごとに異なる番号です。例えば、同じウィジェットでも一度削除後に再度追加すると番号(値)は増加します。, ウィジェットの直後に出力する HTML テキストで、デフォルトでは です。, タイトルの直前に出力する HTML テキストで、デフォルトでは以下のような h2 要素です。, タイトルの直後に出力する HTML テキストで、デフォルトでは

です。, register_sidebar() を使ってサイドバーを登録(定義)すると、管理画面の「外観」→「ウィジェット」に登録されたサイドバーが表示されます。, 以下は名前を「Main Sidebar」、説明を「メインのウィジェット」としてサイドバーを登録する例です。, 上記のようにサイドバーを登録した場合、管理画面の「外観」→「ウィジェット」には以下のようなサイドバーが表示されます。, ウィジェットの追加は追加したいウィジェットをサイドバーにドラッグ&ドロップします。, サイドバーに追加されたウィジェットはタイトルやその内容を設定することができます。設定が完了したら「保存」や「完了」をクリックするとその内容が保存されます。「削除」をクリックするとそのウィジェットが削除されます。, ウィジェットが表示される際の HTML は register_sidebar() を使ってサイドバーを登録(定義)する際にパラメータで指定することができます。, 例えばウィジェットのタイトルはデフォルトでは h2 要素でマークアップされ、widgettitle と言うクラスが付与されます。, 個々のウィジェット自体はデフォルトでは li 要素でマークアップされ、例えばカテゴリーのウィジェットの場合は categories-n(n は数値)と言う id と widget widget_categories と言うクラスが付与されます。, これらのクラスなどを利用してタイトルやウィジェットのスタイルを設定することができます。, この画面で表示されている順序でウィジェットはページに表示されます。各ウィジェットはドラッグすることで順序を入れ替えられます。また左側にドラッグすると削除することができます。, 各ウィジェットの設定を変更するには、ウィジェットのタイトルの右側のアイコンをクリックします。, ウィジェットを表示するには、テンプレートファイルで表示したい場所に dynamic_sidebar() を記述してサイドバーを出力します。, その際に、is_active_sidebar() を使用すれば、そのサイドバーが現在有効になっているかを確認することができます。, 以下の例では、サイドバーは以下のように register_sidebar() の ID に 'left-sidebar' を指定して登録してあります。, サイドバーの出力は、サイドバーが有効化されているかどうかを確認する関数 is_active_sidebar() を使って以下のように記述します。, サイドバーはデフォルトではそれぞれのウィジェットを li 要素で囲んで出力されるので、dynamic_sidebar() を ul 要素で囲んで記述します。, このようにすれば、そのサイドバーが有効な場合のみ