ワードプレスには、今まで、HTMLで記述してきたタグとは違い「テンプレートタグ」と呼ばれる独特なタグがあります。テンプレートタグを、Vscodeの「スニペット」に登録することで入力しやすくなります。

VSCode スニペット設定ファイルの作成

VSCodeでは、ユーザー用のカスタムスニペットを簡単に作成できます。

スニペットの作成手順：

① VSCodeを開く。「Code」→「基本設定」>「スニペットの構成」を選択します。

スニペットファイル

「新しいグローバルスニペットファイル」を選び、ファイル名を「wordpress-tag(例)」等で入力すると新しいスニペットファイルを作成することができます。

新しいスニペットファイルは、緑色のコメントが並んでいます。コメントは、消しても問題ありません。

先頭と後尾に{ } が付いていますので、{ }の中にスニペットを登録していきます。

②　代表的なスニペットを用意してあるので、下記をコピーして{ }の中にペーストしてください。

{
	/////// ワードプレステンプレートタグ//////"

		"WP bloginfo": {
			"prefix": "_wpinfo",
			"body": [
				"<?php bloginfo('${1:name}'); ?>"
			],
			"description": "WordPress: bloginfo"
		},
		"WP site name": {
			"prefix": "_wpsitename",
			"body": [
				"<?php bloginfo('name'); ?>"
			],
			"description": "WordPress: site name"
		},
		"WP site description": {
			"prefix": "_wpdesc",
			"body": [
				"<?php bloginfo('description'); ?>"
			],
			"description": "WordPress: site description"
		},
		"WP get header": {
			"prefix": "_wpheader",
			"body": [
				"<?php get_header(); ?>"
			],
			"description": "WordPress: get_header"
		},
		"WP get footer": {
			"prefix": "_wpfooter",
			"body": [
				"<?php get_footer(); ?>"
			],
			"description": "WordPress: get_footer"
		},
		"WP head": {
			"prefix": "_wphead",
			"body": [
				"<?php wp_head(); ?>"
			],
			"description": "WordPress: wp_head"
		},
		"WP footer hook": {
			"prefix": "_wpfoot",
			"body": [
				"<?php wp_footer(); ?>"
			],
			"description": "WordPress: wp_footer"
		},
		"WP body class": {
			"prefix": "_wpbody",
			"body": [
				"<body <?php body_class(); ?>>"
			],
			"description": "WordPress: body_class"
		},
		"WP template directory uri": {
			"prefix": "_wpuri",
			"body": [
				"<?php echo get_template_directory_uri(); ?>"
			],
			"description": "WordPress: template directory URI"
		},
		"WP image path": {
			"prefix": "_wpimg",
			"body": [
				"<img src=\"<?php echo get_template_directory_uri(); ?>/images/${1:logo.png}\" alt=\"${2:ロゴ}\">"
			],
			"description": "WordPress: image path"
		},
		"WP link home": {
			"prefix": "wphome",
			"body": [
				"<?php echo home_url('/'); ?>"
			],
			"description": "WordPress: home URL"
		},
		"WP logo link": {
			"prefix": "wplogo",
			"body": [
				"<a href=\"<?php echo home_url('/'); ?>\">",
				"  <img src=\"<?php echo get_template_directory_uri(); ?>/images/${1:logo.png}\" alt=\"<?php bloginfo('name'); ?>\">",
				"</a>"
			],
			"description": "WordPress: logo link to home"
		},
		"WP basic loop": {
			"prefix": "wp_loop",
			"body": [
				"<?php if (have_posts()) : ?>",
				"  <?php while (have_posts()) : the_post(); ?>",
				"",
				"    $1",
				"",
				"  <?php endwhile; ?>",
				"<?php endif; ?>"
			],
			"description": "WordPress: basic loop"
		},
		"WP title": {
			"prefix": "wp_title",
			"body": [
				"<?php the_title(); ?>"
			],
			"description": "WordPress: the_title"
		},
		"WP content": {
			"prefix": "wp_content",
			"body": [
				"<?php the_content(); ?>"
			],
			"description": "WordPress: the_content"
		},
		"WP excerpt": {
			"prefix": "wp_excerpt",
			"body": [
				"<?php the_excerpt(); ?>"
			],
			"description": "WordPress: the_excerpt"
		},
		"WP permalink": {
			"prefix": "wp_perma",
			"body": [
				"<?php the_permalink(); ?>"
			],
			"description": "WordPress: the_permalink"
		},
		"WP title link": {
			"prefix": "wp_titlelink",
			"body": [
				"<a href=\"<?php the_permalink(); ?>\">",
				"  <?php the_title(); ?>",
				"</a>"
			],
			"description": "WordPress: title with permalink"
		},
		"WP date": {
			"prefix": "wp_date",
			"body": [
				"<?php the_time('Y.m.d'); ?>"
			],
			"description": "WordPress: post date"
		},
		"WP thumbnail": {
			"prefix": "wp_thumb",
			"body": [
				"<?php the_post_thumbnail('${1:medium}'); ?>"
			],
			"description": "WordPress: post thumbnail"
		},
		"WP category": {
			"prefix": "wp_cat",
			"body": [
				"<?php the_category(', '); ?>"
			],
			"description": "WordPress: the_category"
		},
		"WP nav menu": {
			"prefix": "wp_menu",
			"body": [
				"<?php",
				"wp_nav_menu([",
				"  'theme_location' => '${1:global-nav}',",
				"  'container' => false,",
				"]);",
				"?>"
			],
			"description": "WordPress: wp_nav_menu"
		},
		"WP query news 3 posts": {
			"prefix": "wp_news",
			"body": [
				"<?php",
				"$news_query = new WP_Query([",
				"  'posts_per_page' => 3,",
				"  'category_name' => 'news',",
				"]);",
				"?>",
				"",
				"<?php if ($news_query->have_posts()) : ?>",
				"  <?php while ($news_query->have_posts()) : $news_query->the_post(); ?>",
				"",
				"    <article>",
				"      <time datetime=\"<?php the_time('Y-m-d'); ?>\"><?php the_time('Y.m.d'); ?></time>",
				"      <h3>",
				"        <a href=\"<?php the_permalink(); ?>\"><?php the_title(); ?></a>",
				"      </h3>",
				"    </article>",
				"",
				"  <?php endwhile; ?>",
				"<?php endif; ?>",
				"",
				"<?php wp_reset_postdata(); ?>"
			],
			"description": "WordPress: news posts query"
		}
	}

Prefixで簡単に呼び出せる

Prefixは、文字列、データ、単語の先頭に付加される要素（接頭辞）のことです。例えば、上記のスニペットにより、入力したい個所で「_(アンダーバー)」を入力するとテンプレートタグの候補が出てくるようになります。