More than 3 years have passed since last update.

ウィジェットを有効化してサイドバーを作成方法

WordPress

Posted at 2021-01-18

#ウィジェットを有効化してサイドバーを作る

##作業手順

###1:ウィジェットを有効化するためのコードをfunctions.phpに記述

/**
* ウィジェットの登録
*
* @codex http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_sidebar
*/
function my_widget_init() {
register_sidebar(
array(
'name' => 'サイドバー', //表示するエリア名
'id' => 'sidebar', //id
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<div class="widget-title">',
'after_title' => '</div>',
)
);
}
add_action( 'widgets_init', 'my_widget_init' );

WordPressの管理画面で、「外観」にウェジェットが表示されているはずです。

###2:ウィジェットエリア「サイドバー」をsidebar.phpに表示

<!-- secondary -->
<aside id="secondary">
<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
<?php dynamic_sidebar( 'sidebar' ); ?>
<?php endif; ?>
</aside><!-- secondary -->

※わからない関数などは、ほって置かずググりましょー。

###3:「サイドバー」の中身の設定

サイドバーの中身としては以下のとおりにします。
・プロフィール
・人気記事
・サムネ付き新着記事

####まずプロフィールはカスタムHTMLで作成しましょー。

1点注意です。画像の入れ方です。
画像はWordPress管理画面のメディアで、入れたい画像を新規追加して、その新規追加した画像のURLを、カスタムHTMLに入れます。

＜例＞

<img src="http://localhost:8888/dev/wp-content/uploads/2021/01/profile.png" alt="">

####次に、「人気記事」と「サムネ付き新着記事」です。

この二つはぶっちゃけ、プラグインで入れて、作成した方が早いです。というよりみんなこの方法が有効的と言っております。

人気記事　⇨　WordPress Popular Posts
サムネ付き新着記事　⇨　Recent Posts Widget Extended

使い方は、以下のものを見てください。

Recent Posts Widget Extendedの設定👇
https://affilabo.com/wordpress/15187/

以上です。
わからないことやモヤモヤしたことはググりましょー。

ありがとうございました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up