スポンサーリンク

ピンタレストをwordprssに埋め込むときにコードが消えるのを解消

IT
HypnoArt / Pixabay

サーバ内でブログ用の画像ファイルを管理していると、サーバの容量によっては画像の保存でいっぱいになって、容量が足りない!なんてこともありますよね。

また、サーバの中で保存した画像をブログに張り付けていると、サーバからブログを引っ越しするときにも、いろいろと手間がかかります。

そのため、サーバ内に画像を保存ではなく外部に保存して管理する方法があります。

私は自分で撮影した画像はgoogleフォトで管理しているのですが、外部サイトで紹介している画像を簡単に埋め込めないかと探していたら、ピンタレストというサービスがありました。

 

Pinterest
Discover recipes, home ideas, style inspiration and other ideas to try.

 

おしゃれな画像を簡単に埋め込めるというので、使ってみたかったのですが、ちょっと問題が。

 

それがピンタレストから発行されるコードを使うとwordpress上では消えてしまう問題でした。

 

ピンタレストでおしゃれな画像を埋め込むのに、これはもったいないと思ったので、試行錯誤した結果、コードが消えずに簡単に対処できたので紹介します。

 

スポンサーリンク

ピンタレスト発行のコードがwordpress上で消えてしまう現象

張り付けたいと思った画像に関しては、ピンタレスト上で「…」のボタンをクリックし、「埋め込む」を選びます。

 

そこで発行されるコードが以下です。

コードには2つあって、一つが画像に関するURL。もう一つがピンタレスト側で実行するjsプログラムです。

この2つはどちらも必要ですが、jsプログラムは記事1つに対して1つ張り付ければいいようで、複数のピンタレストを張る場合でも1個です。

 

お試し用の記事に、画像URLのコードとjsのscriptタグを張り付けました。

しかし、ここで厄介な問題があります。

テキストモードで張り付けたコードですが、これをビジュアルモードで編集すると画像のタグが消えてしまいます。

こちら、ビジュアルモードからテキストモードに戻ったところです。

どうもテキストモードで張り付けたものをビジュアルモードで編集しようとするとタグそのものが消える現象のようです。

これを解消するには、どうしたらいいかなんですが、どうも「絶対にビジュアルモードにしない」という方法を取れば問題ないようです。

4ステップでわかる!WordPressサイトにPinterestの写真を埋め込む方法 | FREE SWORDER
WordPressサイトにPinterestの写真を埋め込む方法をわかりやすくまとめてみました。よかったら参考にしてください。

当初、この方法しか取れないのかなと悩んでいました。

というのも、wordpressでブログ記事を書こうとしたときに、基本はビジュアルモードのことが多いと思います。

常にテキストモードだとタグだらけなので、どうしても記述で対応したいタグはテキストモード、簡単な操作でブログの装飾ができるならビジュアルモードと常にモードを行ったり来たりする方法ですと、うっかりビジュアルに戻してしまうなんてこともよくあります。

また、wordpressのエディタモードですが、前回記述した記事のモードを引き継いでくるので、テキストモードで編集作業を終えたら、次の編集もテキストモードで開いてきます。

その逆も、同じです。ビジュアルモードで編集したら次の記事はビジュアルモードで開かれます。

そうなると、例えば他のブログ記事のリライトをビジュアルモードでやっていたときに、ピンタレストを埋め込んだ記事を再度編集しようとして開いた場合、ビジュアルになってしまいます。

毎回、そこまでモードの切り替えを意識しておいて、次の記事を編集するかというと、それは難しいですよね。

そこでテキストモードからビジュアルモードにしてもコードが消えないようにする方法はないか考えたところ、この方法なら特に影響なく可能だというのがありましたので、備忘録も兼ねて残します。

ピンタレストのコードをビジュアルモードにしても消えない方法

やり方は簡単です。

ピンタレスト上で埋め込みをクリックして発行したコードの画像本体のほうのURLにちょっとした仕掛けをします。

 

仕掛けといっても難しくありません。

画像のコードを見てください。

仕掛けをした後にビジュアルモードに変更したら、何かのリンクみたいなものができているのがわかると思います。

 

<a data-pin-do="embedPin" href="https://www.pinterest.com/pin/******************/"> </a>

画像の中のコードを抜き出した部分です。

*********とある箇所は一部コードを伏せました。

aタグですが、ピンタレストで使用すると思われるプロパティが含まれています。

恐らくこれが何も仕掛けをしないとworpdress側で文法が違うからと削除している可能性があります。

それからaタグの場合、何かの文字列をタグの間に挟んでリンクを文字列に関連付けますが、この自動生成されたタグには文字列が一切ありません。

そこで<a data-pin-do=”embedPin” href=・・・・> </a>の間に1つ空白を入れました。(上の画像参照)

たったこれだけです。

 

 

実際にビジュアルモードで作業しても、ピンタレストの画像も消えません。

<a>タグに空白を入れていますが、表示にも影響ないです。

 

まとめ

ピンタレストで画像を埋め込もうとしたときに、「テキストモードでブログ記事を書く」でも良かったのですが、ずっとテキストモードで書けるかという悩みは、これでは解決できないんですよね。

<a>タグに空白を入れるだけで簡単に解決できるので、この方法はずっと使えると思います。

 

 

 

 

コメント