よくぞいらっしゃいました。アフィリエイトで稼ぐための情報を書いているたー坊(@affiliateblog) と申す!

よろしくお願いしますね。記事が良かったら最後の方にあるリンクからブックマークでもしていただければと思います。

この記事ではWordpreessのGutenberg(ブロックエディター)における【 カラム 】のブロックをクラシックエディターでも簡単に使えるようにするTipsをお教えします。

超簡単で素人でもすぐ使えるようになります。

まずコードについてはすでに記事してあります。

WordpreessのクラシックエディターでGutenbergのカラムを使う方法(コード)

この記事ではさらに進めて初心者で超楽勝でカラムを使いこなす方法について解説します。

その前にクラシックエディターを使う理由について説明します。

Gutenbergは不具合が多い

以前はGutenbergを使っていたのですが、不具合が多すぎるし、不必要に操作ミスを起こしやすいので今は全面的に使用をやめています。

最大の理由が、日本語のスラッグを保存できなくなったこと。Gutenbergを使っているサイトでマルチバイト文字のスラッグが保存できなくなるという現象が複数起きました。クラシックエディターにすると保存できたのでGutenbergが原因の可能性が高いでしょう。

Gutenbergのカラムをクラシックエディターで使いやすいようにする

でもカラム自体は使いたいですよね。

何のことはないさっきの記事のコードを使うのですが、いかせんコードが複雑で使いにくいです。これをショートコード化してしまいます。自分でショートコードを作れる方はそれで、作れない方はショートコードのプラグインを使います。ショートコード化できるプラグインやテンプレート化できるプラグインはいくつかあるのですが、今回はPost Snippetsを例に説明します。

Postsnippetsとは

​このプラグインを使用すると、投稿やページで頻繁に使用するHTML、PHPコード、または繰り返し使用するテキストのスニペットでライブラリを構築できます。​定義済みの変数を使用して、挿入時にスニペットの一部を置き換えることができます。​すべてのスニペットは、Visualモードのボタンを使用してポストエディタで使用できます。​スニペットは、定義どおりに挿入することも、スニペットを柔軟に更新できるようにショートコードとして挿入することもできます。​PHPコードは、ショートコードとして挿入されたスニペットに対応しています。

未来翻訳で翻訳。(めっちゃすごい翻訳)

さてこれを使うのですが簡単に言えば、文章を登録して、ショートコード化するか、ただのひな形として使うかを選択します。ショートコード化すると記事中では編集できません。ショートコード化せずプラグインの画面で何も選択しないとそのまま文章が記事に挿入され編集もできます。

どっちでも使えますが、ショートコード化しないと意味がないですし、簡略化のためなのでショートコード化します。

column1

<!– wp:columns –>
<div class=”wp-block-columns”><!– wp:column –>
<div class=”wp-block-column”><!– wp:freeform –>
<p>

column2

</p>
<!– /wp:freeform –>

<!– wp:tadv/classic-paragraph /–></div>
<!– /wp:column –>

column3

<!– wp:column –>
<div class=”wp-block-column”><!– wp:freeform –>
<p>

column4

</p>
<!– /wp:freeform –>

<!– wp:tadv/classic-paragraph /–></div>
<!– /wp:column –></div>
<!– /wp:columns –>

このように4つの部分にわけます。やってみるとわかると思いますが、2と3は1つのsnippetにしても大丈夫です。

そして最終的にこのようになります。

[[column1]][[column2]][[column3]][[column4]]

左右の文字だけわざと大きくしてます。(わかりやすくするためだけです)

また実際のショートコードは[と]ですが、ショートコード化しないために一応二重にしてます。

このようにショートコードを使うとすっきりして非常に使いやすくなるんですね。

これが記事では2つのカラムに分かれて表示されますよ。

これなら初心者でも楽勝でカラムをクラシックエディターでも使いまわしできますね。

あとはこのショートコードすべてを「ショートコード化しないで」postsnippetsに登録しておけば記事中にそのまま挿入されて編集できます。

ター坊
ター坊

楽勝!

コピペ

※–(ハイフン2個)の部分が文字化けして?になってしまっています。

なのでコピペで使う際はメモ帳で?を–(ハイフン2個)に一括置き換えして使ってください。

サイト型のホームページ構築に悩んでいるならこちらがおすすめです。(⇒完璧なサイト型Wordpreessテーマ )

emanon
ター坊
ター坊

コメント大歓迎です。なぜならコメントもコンテンツだから…笑
さて、メールアドレスも記入不要にしておいたので暇だったらコメントしていってください!(リンク目的の場合はスルーします。)


この記事がいいと思ったらはてなブックマークに保存しておこう!Twitterのフォローも良ければお願いします。

  このエントリーをはてなブックマークに追加

コメントを残す

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)