WordPressのサイドバーに表示されるウィジェットのタイトルを「h2」タグから他のタグ（例えば「p」タグ）へ変更する方法

私のWordPressの親テーマは「twentyseventeen」であるが、今回のカスタマイズは他のテーマでも殆ど同じカスタマイズになるかと思います。「何故ウィジェットのタイトルタグが<h2>ではいけないのか？」疑問に思いませんか？

これはSEO対策の一つでもあります。頭ではいずれはやらないといけないと思っていたのですが、すっかり忘れていました。

見出しタグとして<h1>～<h６>までヘッダータグが存在しているのですが、これは優先順位があります。勿論、<h1>が最優先項目です。通常ですと<h1>タグは1ページに一つが望ましいです。次に<h2>タグが優先されるのですが、これが1ページに複数あるとSEO対策としては望ましい事ではありません。

個人的には<h2>タグは1ページに２～3個位が良いのではないかと思います。記事中に基本は利用するので、サイドバーやフッターのウィジェットのタイトルの為に<h2>タグを利用すること自体が意味のないHTMLソースとなってしまいます。少しでも記事中の<h2>タグが検索エンジンに引っ掛かる様にするには、無駄な<h2>タグは排除すべきなのです。<h3>以降のタグについてはそれ程、気にすることはないと思います。

もう少し簡単に言うと、<h1><h2>タグについては有意義に利用しようということです。その為には少しばかりWordPressの構造を理解してカスタマイズする必要がでてきますので、その方法についてこれから説明しようと思います。

ウィジェットのタイトルを<h2>以外にする方法

まず見て貰いたいファイルがあります。親テーマの「function.php」ファイルの中身を参照してみたください。下の様なコードがあるはずです。これはあくまでも「twentyseventeen」の例となりますが、他のテーマでも同じような記述があるはずです。

/**
* Register widget area.
*
* @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
*/
function twentyseventeen_widgets_init() {
register_sidebar( array(
'name' => __( 'Blog Sidebar', 'twentyseventeen' ),
'id' => 'sidebar-1',
'description' => __( 'Add widgets here to appear in your sidebar on blog posts and archive pages.', 'twentyseventeen' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );

register_sidebar( array(
'name' => __( 'Footer 1', 'twentyseventeen' ),
'id' => 'sidebar-2',
'description' => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );

register_sidebar( array(
'name' => __( 'Footer 2', 'twentyseventeen' ),
'id' => 'sidebar-3',
'description' => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'twentyseventeen_widgets_init' );

これは何をしているか分かりますか？「widgets_init」というものに「twentyseventeen_widgets_init」関数の定義を適用している箇所になります。要はこの定義を子テーマの「function.php」を変更してしまえば良いのです。

子テーマの「funcion.php」の修正方法

子テーマの「function.php」に次の様なコードを追加してやれば良いのです。親テーマで「widgets_init」に定義したものを削除して、再定義してやれば良いだけです。その為には親テーマの「twentyseventeen_widgets_init」関数を子テーマの「functon.php」ファイルに関数名を変更して定義してやる必要が出てきます。この再定義する際に<h2>タグを他のタグに変更してやれば良いのです。下のコードですと、<h2>タグを<p>タグに変更した例となります。

ちなみに子テーマに定義する関数名については自分が分かりやすければ何でも大丈夫です。自分の場合は敢えて「Child」というようなキーワードを入れて区別するようにしていますが。

下の赤い背景部分が要注意部分となりますので、ご確認してからカスタマイズするようにしてください。

// ウィジェットのタイトルタグを「h2」から「p」へ変更する
if ( ! function_exists( 'child_twentyseventeen_widgets_setup' ) ):
function child_twentyseventeen_widgets_setup() {
remove_action( 'widgets_init', 'twentyseventeen_widgets_init' );
add_action( 'widgets_init', 'twentyseventeen_widgets_init_child' );
}
endif;

add_action( 'after_setup_theme', 'child_twentyseventeen_widgets_setup' );
function twentyseventeen_widgets_init_child() {
register_sidebar( array(
'name' => __( 'Blog Sidebar', 'twentyseventeen' ),
'id' => 'sidebar-1',
'description' => __( 'Add widgets here to appear in your sidebar on blog posts and archive pages.', 'twentyseventeen' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<p class="widget-title">',
'after_title' => '</p>',
) );

register_sidebar( array(
'name' => __( 'Footer 1', 'twentyseventeen' ),
'id' => 'sidebar-2',
'description' => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<p class="widget-title">',
'after_title' => '</p>',
) );

register_sidebar( a => __( 'Footer 2', 'twentyseventeen' ),
'id' => 'sidebar-3',
'description' => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<p class="widget-title">',
'after_title' => '</p>',
) );
}