PHP 初心者が WordPress の プラグイン 作成 ！ part66 ( ココナラブログで画像と動画の要素 )
この記事では PHP 初心者 が WordPress プラグイン を 作成 します。 part66 ではココナラブログで使用できる要素を確認しておきます。
タグのエスケープとリンク置き換えは見事に成功しました。
PHP 初心者が WordPress の プラグイン 作成 ！ part65 ( タグのエスケープ確認 )
今回はココナラブログで使用できるタグの一部を確認したいと思います。
エディタ特有の記述
WordPressの新しいエディタGutenberg（グーテンベルク）ではWordPress独自のコメントが付与されて保存されます。
<!-- wp:paragraph -->
<p>実装が正しく処理されるか確認を行います。<br>GoogleのURLです。</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><a href="https://www.google.co.jp">https://www.google.co.jp</a></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>どうでしょうか？</p>
<!-- /wp:paragraph -->しかし旧来のエディタ(クラシックエディタ)では上記のような<!-- xxxx ->という表記はありません。
ココナラブログへの転記もこの独自コメントが一緒に付与されます。
・・・私は旧来のエディタを使用する派なので今回は新エディタの独自コメントは無視(削除)して進もうと思います。
ココナラブログで使用できるタグ
ココナラブログでは以下のタグ(要素?)が使用できるようです。
写真
写真は以下の写真や画像は以下のアイコンをクリックします。
その後、ファイルを指定すると画像が挿入されます。
元画像の大きさのまま挿入されるようです😅
要素はこんな感じです。
<div class="c-blogBody_img" contenteditable="false"><img src="https://xxxx.png" alt="magnifier_animal_inu.png" loading="lazy"><br></div>動画
以下のアイコンをクリックして動画も挿入できるようです。
クリックすると、動画サイトのURLを入力するウィンドウが表示されます。
直接動画ファイルをアップロードするわけではないんですね。
それと、画像を見てわかるようにヒントには「youtube.com」の文字が見えます。
動画サイトはyoutubeのみ許可ということでしょうか。試しに適当な動画のリンクを挿入してみます。
YouTubeを開くとたまたまトップページに出てきました。
問題なく挿入されています。
以下は動画の要素です。
興味深いのは貼り付けたリンクのアドレスが変換されていることです。
<div data-v-22617325="" class="c-blogBody_youtube" contenteditable="false">
<iframe width="635" height="315" src="https://www.youtube.com/embed/JedVK4Y3Aps" frameborder="0" allowfullscreen="">
</iframe></div>まとめ
まだあるのですが本日は疲れたので次回にしたいと思います。
ココナラブログの独自タグはなかなか手ごわいですね。
WordPressの本文もこれに従って変換しようか、それともすべてのタグを捨ててただ文字列で貼り付けるか悩ましい🤔
今日はここまで！