VSCode-logo

私はブログの記事作成に、しばらくWordPressのエディタを使っていたのですが、

特定の条件で動作が遅くなったり、自動フォーマットの修正に時間をとられたり、マルチカーソルが使えなかったりと、少々使いにくいところがあったので、

VS Code でリアルタイムプレビューしながら記事を作成(定型文はスニペットを利用)
  ↓
作成した記事を WordPress のエディタ画面に貼る
  ↓
微調整
  ↓
投稿

という方法をとるようになりました。

今回は、そのための便利な設定諸々を、備忘録として記しておきます。

ところどころ個人設定なところがあるので、それらはサクッと削ってください。

"Live Server" の導入

"Live Server" は、HTML を書きながら、リアルタイムでプレビュー画面を表示してくれる VS Code の拡張機能です。

リアルタイムプレビューの拡張機能は色々あるのですが、今はこれを使っています。

 

導入方法は下記。

画面左側の拡張アイコン(もしくは、Ctrl + Shft + X)で拡張画面を開く
  ↓
検索画面に "Live Server" と入れて検索

Liver Server

  ↓
インストール

Live Server

原稿用フォルダの作成

"Live Preview" 用に、任意の場所にフォルダを作成し、そこに CSS と HTML を入れておくと便利です。

私は、ブログ用のフォルダの中に、

  • draft (リアルタイムプレビュー用フォルダ)
  • post (作成した投稿記事の収納場所)
  • image (WordPress にアップフォードする画像)
  • setting (WordPress の PHP や CSS の設定のバックアップ)

というフォルダを作成しています。

このうち、"draft" が Live Preview 用のフォルダで、この中に CSS ファイルと HTML ファイルを作成します。

CSS ファイルの作成

CSS ファイルの作成方法は下記。

VS Code 内で、Ctrl + N で新規作成画面を開く
  ↓
画面右下の言語(デフォルトはplane text)をクリック

言語の設定

  ↓
画面上に "Select Language Mode" とかかれた、言語の検索窓がでてくる
  ↓
検索窓に "css" と入れ、すぐ下に出てくる CSS を選択

言語の設定
  ↓
Ctrl + S で、"draft" フォルダーに保存

CSS ファイルの記述

WordPressのスタイルシートをコピーします。

子テーマを作っていない人だったら、

管理画面
  ↓
外観
  ↓
テーマエディター
  ↓
"style.css"

と進み、まるっとコピーして、新規作成した CSS ファイルにペーストします。

 

私の場合は、Twenty Seventeen の子テーマを作っていて、さらに付随の CSS エディターで色々修正しているので、下記の内容をコピーし、ペーストています。

管理画面
  ↓
外観
  ↓
テーマエディター
  ↓
子テーマのstyle.cssの中から、
/*------------------------
5.0 Typography
------------------------*/
の内容だけコピーし、新規 CSS ファイルにペースト
(他の内容は、投稿記事にそこまで関係ないため)
  ↓
その画面の上にある、"付随の CSS エディター"という部分をクリックし、追加CSSの画面に移動
  ↓
追加CSSの内容を全てコピーし、新規 CSS ファイルにペースト
  ↓
保存

HTMLファイルの作成

HTMLの作成も、CSSと同様に行います。

VS Code 内で、Ctrl + N で新規作成画面を開く
  ↓
画面右下の言語(デフォルトはplane text)をクリック
  ↓
画面上に "Select Language Mode" とかかれた、言語の検索窓がでてくる
  ↓
検索窓に "html" と入れ、すぐ下に出てくる html を選択する
  ↓
Ctrl + S で、"draft" フォルダーに保存する

スニペットの登録と出力

WordPress では、エディター画面に普通に記事を書いていくだけで OK でしたが、通常、HTML には下記の情報が必要です。

  • <html>タグ
  • <head>タグ
  • <body>タグ

最初の<html>でHTMLの文書であることを宣言し、文書を始め、最後の</html>でHTML文書を閉じます。

そして、その中にheader要素とbody要素が1つずつ入ります。

VS Code には、"Emmet" という神がかり的な機能があって、規定の公式を入力するだけで色々な記述を補完してくれます。

今回の内容に絞ると、!(エクストラネーションマーク)を入力するだけで、下記のコードを瞬時に出してくれます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

私の場合は、それを自分用に少しだけ改善して、スニペットに登録しています。

スニペットの登録

スニペットとは、単語登録のように、特定の文字を登録しておいて、その文字を入力すると定型文を呼び出すことのできる機能のことです。

では各拡張子ごとにスニペットを登録できます。

この機能のおかげで、色々な定型文を一瞬で出すことができ、記事作成時間が驚くほど早くなりました。

File -> Preferences -> User Snippets
(もしくは、Ctrl + Shift + P でコマンドパレットを開いて "Snippet" で呼び出す)
  ↓
スニペット一覧から、"html" を選択
(スニペットはJSON形式で保存される)

スニペットに必要な情報は下記3点です。

変数名
prefix 呼び出すためのコード
body 呼び出されるコード
description スニペットの説明(省略可)

prefix

ここに記述した文字でスニペットを呼び出すことができます。

例えば、私の記事テンプレートは、"mom" と入れたら出てくるようにしたいので、ここに "mom" と入れます。

body

呼び出されるコードを書く部分です。

"body" :[ 以降から、 ] までに、呼び出したいコードを記述します。

body の書き方
  • 各行は、ダブルクオーテーションマーク " " で括り、行末にカンマ ',' を置く
  • 呼び出したいコードの中に "" が入っている場合は、バックスラッシュ '\' (ブラウザによっては¥)でエスケープする
  • $1, $2... を変数として使う
  • 変数を "${1:説明}" のようにして、説明文章を入れることも可能
  • スニペットを複数作るときは、グループ毎にカンマ ','でつなげ、最後のスニペットだけカンマをつけない

変数$の部分は、実際に呼び込まれた際、Tab キーで飛んでいくことができ、大変便利です。

"${1:説明}" のようにしておくと、その部分に説明内容が表示され、なにか文字を打ち込むと消えるようになります。

個人で使う場合には覚えているのでいらないと思いますが、複数人でシェアする場合などには便利だと思います。

 

以上の法則に従って、記述した記事用のテンプレートは、下記のようになります。

	<!DOCTYPE html>
<htlm lang="ja">
	  <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="./css-mn.css"/>
<title>記事タイトル</title>
	  </head>
	  <body>
<article style="padding: 100px">
<!--start-->
	ここに記事を書く
<!--end-->
</article>



	  </body>
</htlm>

※ 他のスニペットグループ色々

}

'!' で出てくるスニペットを、下記4点変更しています。

  1. <html lang>を "en" から "ja" に変更
  2. <rel>を、同フォルダ内のスタイルシートに割当て
  3. <body>の下に<article>タグを追加
  4. <meta>関連を削除

<html lang>を "en" から "ja" に変更

私のサイトはほぼ日本語で構成されているので。

<rel>を、同フォルダ内のスタイルシートに割当て

同フォルダ内に作成した CSS ファイルを読み込んでもらうための指示に書き換えます。

  • rel: relation (関係)
  • href: hypertext reference (参照)

の意味。

"rel" でどんなリソース化説明して、"href" でリソースの場所を示すイメージです。

"rel" には、

  • stylesheet: スタイルシートやフォントの読み込み
  • icon: ファビコン etc.
  • canonical: 正規のページ(SEO対策等)

etc. が入りますが、今回は "stylesheet" になります。

"href" は、同フォルダ内の CSS ファイル名(○○.css)、という指示を記述します。

"./" で、「同じフォルダ内」という意味です。

ちなみに、一つ上の階層だったら "../" と書きます。

	<link rel=\"stylesheet\" href=\"./css-mn.css\"/>

<body>の下に<article>タグを追加

通常はなくてOKですが、私の場合は、CSS 指定している内容に<article>が含まれているので、<article>タグを追加しています。

また、デフォルトだと余白がなくて見苦しいので、<article>にスタイル属性をつけて、100px の padding を追加しています。

<article style=\"padding: 100px;\">

<meta>関連を削除

meta タグは、meta 要素とも言って、Web ページの情報を検索エンジンやブラウザなどに伝えるタグのことで、SEO 的に入れておくべき要素です。

今回は、VS Code 内で記載した内容をそのままアップするのではなく、WordPress のエディタに貼付して、WordPress から投稿するので、これらの情報は削っています。

 

スニペットは大変便利なので、これ以外にも、よく使う定型文をどんどん保存し、数文字打てばすぐに呼び出せるようにしています。

スニペットの出力

登録さえしておけば、スニペットの出力はとても簡単。

"prefix" の文字を打つだけで、登録したスニペットが出力されます。

eg. 私の場合は、"mom" と打つと、上記テンプレートが現れます。

"Live Server" でリアルタイムプレビュー

以前、"HTMLプレビュー" という拡張機能でリアルタイムプレビューを行っていましたが、若干不都合が生じたので、今は "Live Server Preview" を使用しています。

Live Server Preview の導入

拡張機能(CtrL + Shift + X)画面を開く
  ↓
"Liver Server" で検索
  ↓
インストール

HTMLとCSSの入ったフォルダを選択して開き、プレビュー画面を見ながらHTMLの記事作成

File -> Open folder もしくは、Ctrl + K -> Ctrl + O で、目的の HTML と CSS ファイルが収納されているフォルダ(私の場合は、"draft-mn")を開く
  ↓
HTML ファイルを開くと、画面右下に "Go Live" という表示が現れるので、そこをクリックする

Go Live

  ↓
ブラウザが開き、プレビュー画面が表示される
  ↓
プレビュー画面で確認しながら記事を作成

ここで抑えておくべきポイント2点。

ファイルではなくフォルダを開く

最初に私が躓いたのが、HTML ファイルと CSS ファイルをそれぞれ直接開くのではなく、両者が収納されている「フォルダごと」開く、というもの。

そうしないと、HTML 画面右下の "Go Live" の表示がでてきません。

ファイルは 「自動保存」にしておく

HTMLファイルを編集しても、保存しなければプレビュー画面にリアルタイムで反映されません。

Ctrl + S で保存するだけなのですが、できるだけ手間を省きたいので、私は自動保存にしています。

File
  ↓
Auto Save を有効化

自動保存

この設定をしておくだけで、記事を修正すればすぐに自動で保存してくれ、プレビュー画面にもほぼリアルタイムで反映されることになります。

画像の取り扱い方

画像は、WordPress にアップロードして、その URL を VS Code に貼り付ける形になります。

毎回アップして挿入して……という作業は時間がかかるので、

私は、下記のようにしています。

スクショなどの画像データを Photoshop に入れておいて、編集せずにナンバリングして保存
  ↓
VS Codeで記事作成中、その画像を入れたい部分にコメントしておく

<!-- img 1 -->

  ↓
記事作成終了後、Photoshop で画像の解像度など編集し、JPEG etc.で保存
  ↓
保存した全ての画像を、WordPress のメディアにアップロード
  ↓
それぞれの画像の代替テキストを書いて、全て選択し、投稿画面に挿入
  ↓
テキストエディタで出てきた URL をコピーし、VS Code の、それぞれマークしていた部分に挿入していく

WordPress のエディタ画面に貼付

スニペットやプレビュー画面を駆使して記事を作成したら、WordPressのエディタ画面に貼付します。

この時、<html>から<article sytle="padding: 100px">までと、</article>から</html>までは除外してコピペします。

除外部分

<!DOCTYPE html>
<html lang="ja">
  <head>
    <link rel="stylesheet" href="./css-mn.css"/>
    <title>タイトル</title>
  </head>
  <body>
    


<article style="padding: 100px">

    </article>
  </body>
</htlm>

微調整し、(予約)公開

ショートコードがきちんと反映されているか等をWordPressのプレビュー画面で確認し、公開(予約公開)します。

修正事項はそこまで多くないのですが、時々自作ブログカードのタイトルなどが時々文字化けしていたりするので、そのときは手動でタイトルと抜粋を入力したりしています。

 

以上、長くなりましたが、VS Code で編集 → WordPress で投稿の私的方法でした。

References

HTMLやタグ等の基本情報

スニペットの方法等

VS Code Live Server について