【WordPress】で[vue.js]を意地でも使いたい

「【vue.js】は使いたいのだけれど、【WordPress】ではビジュアルモード使用時にタグが書き換わって使用できない(‘_’)」

と悩んでおりましたが、ひとまずは解決方法を思いついたのでご報告を。

【WordPress】で[vue.js]を使うなら「iframe」でしょ!

1.開発ツールで、必要な部品を入れたファイルを作成

『Visual Studio』とかの開発ツールや適当なテキストエディタなりでファイルを作成します。

2.記事内ではiframeで呼び出す。

<iframe src=”【作ったファイルを置いた場所/ファイル名】”></iframe>

これで呼び出す。

以上。

メリット:とにかく楽。

「とりあえず「iframe」使っておけばいい」という単純さ。

単純なので保守も簡単です。

「【vue.js】を使いつつ、【WordPress】の補完機能は残したい…」とウンウン悩んでいたのですが

「HTMLファイル作成してiframeで呼び出せば解決しそうな気がする!」

と思いつき、そういえば素人感丸出しでiframe呼び出した記事を作成したなと思い出したので、こちらを利用して呼び出してみます。

技術力高い人であれば何か良い解決方法があるのでしょうが、こっちは素人。

素人なりに戦うしかありません。

【WordPress】iframeを(強引に)呼び出す超簡単な方法

そもそもなぜ普通に使用しないのか

実は、【WordPress】で【vue.js】を使おうとすると、

「(WordPressさん)ああこれはテキストねー。テキスト属性あげちゃう(ペター)」

と余計なタグを自動で入れてくれる機能があるので、JavaScriptのフレームワークを使用するのには不向きなのです。

ここで、普通にコーディングした場合にどうなるかご覧いただきたい。

-Before-

<div id="app">
    <input v-model="netaName" /><button @click="addItem">追加</button>
    <ul id="itemList">
        <span v-for="item in shari">{{ item }}</span>
    </ul>
</div>

 

-After①-

<div id="app"><input v-model="netaName" type="text" /><button click="addItem">追加</button><span v-for="item in shari">{{ item }}</span></div>

おわかりだろうか?

まず、「1行にまとまる。」

インデントを付けてもきれいに1行にしてくれる。

ではインデントを復活させて中身をご覧ください。

-After②-

<div id="app">
    <input v-model="netaName" type="text" />
    <button click="addItem">追加</button>
        <span v-for="item in shari">{{ item }}</span>
</div>

おわかりだろうか?

とりあえず<input>と付いていればテキスト属性を入れてくれる。

「入れ忘れたんだね」と忖度して追加してくれる親切設計も、ここではコードを破壊するだけになってしまう。

(もちろん、この状態だとエラーにもならずに動かない)

 

【WordPress】できる他の解決方法

1.(気合で)投稿する

過去に行った手法として、

①とりあえずビジュアルモードで記事を完成させる。

②【vue.js】記載の部分だけは『Visual Studio』などで記述。

③テキストモードを選択。

④完成した記事に②で作った部分をコピペする(ビジュアルモードには変更しない!)

 

この手法を行っていましたが、点検などで記事を更新すると即動かなくなるのでやめました。

メリット:ひとつの記事にちゃんとまとまる

デメリット:保守性とは?

 

2.ビジュアルモードを使用禁止にする

これが一番メジャーなのではないでしょうか?

そもそも、「ビジュアルモード」を使用して属性やらが自動生成されるのですから、使用禁止にしてしまえば解決します。

シンプルイズベスト。

しかしながら、「ビジュアルモード」めちゃ便利ですよね?

<p>タグ自動で使用してくれるし。

ショートカットで<h>タグも一瞬で指定することもできるし。

私は手放せないので、とりあえずこれは見送りです。

メリット:手堅い

デメリット:記事を書くのが手間になる

 

コメントを残す

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