【WordPress】手順を説明する記事パーツでテンプレート化【Gutenberg】

アイキャッチ

記事内で手順が分かりやすいように説明したいけど、毎回作るのめんどうだな。じゃあテンプレート化しよう!

製品のレビューや、ソフト・サービスの使い方などの記事を書いていると、設定などを手順を追って説明するケースがあります。

H2やH3などの見出しを使ってもほとんど同じことができるのですが、1つのステップごとにブツ切りになってしまいます。

そこで、手順説明を1つの見出し内で独立させたほうが記事構成上すっきりするのではないかと思いました。

WordPress の Gutenberg エディターの再利用ブロックを利用すれば簡単にテンプレート化できるので、手順説明の効率化をしてみました。記事内で再利用ブロックを配布しているので同じような経験をしている方は試してみてはいかがでしょうか。

手順再利用ブロックテンプレート
  • 自動で手順の番号を連番
  • 極力シンプル
  • 手順の最初へ戻るリンクを配置
下記のWordPress テーマで動作を確認しました。
  • SANGO + Poripu
  • JIN

手順を説明するブロックを追加しよう

WordPress 投稿画面を開く

WordPress 5.0 以上で Gutenberg エディタ を使っている前提です。

再利用ブロックの編集画面は管理画面から飛べません。投稿画面の新規ブロック追加から移動する必要があります。(やり方があったら教えて下さい。)

記事投稿画面の + マークを押して新規ブロックを追加します。一番下の「再利用可能」を選択してください。

再利用可能ブロックを追加

すべての再利用ブロックを管理」から再利用ブロックの管理画面に移ります。

管理画面へ

再利用可能ブロックが表示されない場合は、適当に 段落 を新規追加して 再利用可能ブロックを追加してください。

再利用可能ブロックを追加

.json ファイルをインポート

再利用ブロックは作成済みのものをインポートして使うことが出来ます。

こちらをダウンロードしておきましょう。

再利用ブロックの管理画面に移動したら

再利用ブロック管理ページ上部の「JSONからインポート」をクリックします。

jsonインポートボタン

ダウンロードした .json ファイルを選択してインポートしましょう。

インポート完了後、リロードすると一覧に表示されます。

WordPress テーマのstyle.css に追記

WordPress を FTPで開いて 子テーマの style.css に追記します。

style.css

/*--------------------------------------
ステップ・手順 カウンター
--------------------------------------*/
.entry-content section.step {
	counter-reset: step 0;
	margin-bottom: 1.5em;
}

.entry-content section.step div.separate {
	border-top: 2px dashed #ccc;
}

/*最初の段落をタイトルにする*/
.entry-content section.step > div > p:first-child {
	position: relative;
	padding: 1em  0em 5px 5.5em;
	color: #555;
	font-weight: 600;
	letter-spacing: 2px;
}

.entry-content section.step > div > p:first-child:before {
	position: absolute;
	top: .8em;
	left: 0;
	width: 4em;
	height: 1.2em;
	text-align: center;
	font-size: 1.1em;
	line-height: 1.2em;
	letter-spacing: 0px;
	padding: 3px;
	counter-increment: step;
	content: "手順 " counter(step);
	border: 1px solid rgba(120,120,120,0.7);
	border-radius: 5px;
	background:    rgba(120,120,120,0.7);
	color:rgba(255,255,255,1);
}

.entry-content section.step div{
	padding-bottom: 1em;
}

/*スマホでのズレを修正*/
@media screen and (max-width: 500px) {
	.entry-content section.step div p:first-child:before {
		top: 1em;
	}
}

/*最初のステップへ戻る*/
div.to_first_step {
	text-align: right;
	margin-bottom: 1em;
}

div.to_first_step a:before  {
	text-align: right;
	font-family: "Font Awesome 5 Free";
	font-weight:900;
	content: "\f30c";
	padding-right: .2em;
}

記事に再利用ブロックを挿入

再利用ブロックをさきほどインポートしたブロックを記事に入れます。

再利用ブロックを追加

このまま再利用ブロックを使うと、ほかの記事に同じブロックを挿入した時上書きされてしまうので、「通常のブロックへ変換」します。

通常ブロックへ

そしてhtmlブロックが正常に表示されないので、「HTMLに変換」をクリックしましょう。

html変換

手順テンプレートの使い方

青で囲ったところは基本的にいじらなくてOKです。

<div>と</div>が離れていますがこの中に書いたブロックが1つ1つの手順になります。

<div>の次の段落は手順のタイトルになるようにしています。

その次からは自由にブロックを追加してください。

手順の区切りは緑で囲ったブロックで記述しているので、必要に応じて複製して配置してください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です