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

CMSはプログラミング知識が無くてもブログを書ける素晴らしい機能です。

しかし、私のようなへっぽこプログラマーから見たら 「直接ファイル操作できたら楽なのに…」という場面もちょくちょく訪れます。

そのひとつが「ブログ内に自作iframeを表示させる」こと。 「iframeを表示させること」は楽なのです。

「src=”【ホニャホニャ】”」で呼び出してあげればいいのです。

しかし、【WordPress】は、記事作成の度にいちいちファイルを作成していくスタイルではないので、これが実現できないのです。

「【WordPress】は記事内のHTMLは全てSQLのフィールドで保管して、表示時にセレクトしてドバーと出す」仕様なのです(賢いですね)

前置きはこれくらいにして、即解決する手段はこちら ↓

「FTP接続してHTMLファイルをねじ込む」

これだけです。

「なにを当たり前のことを…」と思われた方には申し訳ないです。

「ちょっと何言ってるかわからない」と思われて1ミリでも興味を持っていただいた方は、下記手順をご確認いただければ幸いです。  

手順:iframeを(強引に)呼び出す超簡単な方法

1.iframe用のHTMLを用意します。

2.「FileZilla」などのFTP接続ソフトを使用して、サーバーに接続します。

3.【/wp-content/uploads】の階層に、新たにディレクトリを作成します。

4.[1.]で作成したHTMLファイルを、このディレクトリに放り込みます。

5.あとはお好きな記事投稿の際にiframeを呼び出します。

以上です。  

以下、詳細手順です。

詳細手順

1.iframe用のHTMLを用意します。

なお以下のiframeサンプルは、特に気兼ねなくコピペしていただいて構いません。

【サンプル用iframe】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>iframeを超簡単に表示</title>
</head>
<body bgcolor="lightblue">
<p>iframe表示部分</p>
</body>
</html>

 

2.「FileZilla」などのFTP接続ソフトを使用して、サーバーに接続します。

ログイン後、念のためサーバー全体のバックアップは作成してください。

転ばぬ先の杖です。  

3.【/wp-content/uploads】の階層に、新たにディレクトリを作成します。

適当にわかりやすい命名にしてください。

ちなみに私は「biiver-html」にしました。  

4.[1.]で作成したHTMLファイルを、このディレクトリに放り込みます。

「FileZilla」などですとドラッグ&ドロップで転送できますから楽ですね。  

5.あとはお好きな記事投稿の際にiframeを呼び出します。

<iframe>タグを使用してsrcに呼び出したいファイル名を書くだけです。 ちなみに、本ブログ内で本ブログの記事をiframeで呼び出すこともできます。

<iframe src="https://biiver.com/wp-content/uploads/biiver-html/iframe_test.html"></iframe>

  ■完成■

 

以下駄文です。

思いついたきっかけ

実は【./wp-content/uploads/】の階層は、アップロードした画像とかが保管してあるディレクトリです。

【WordPress】では画像を呼び出す際に直接呼出しますから(さすがに画像ごとにバイナリデータとして保管してるわけない) 「この仕組みを使って表示できるのでは?」と思いついたので即実行。 「跳ね飛ばされてリダイレクトとか入るかな?」と思ったのですが、ちゃんと表示できたので思わずにっこり。  

「iframeを呼び出す」だけなのに…

iframeを作成するのにあたって思いついたことは以下くらい。

1.iframeは呼び出さずに頑張って手打ちだ。

2.もういっそのこと、子パーツを集めただけの別サーバーを作成してそちらにファイルを放り込んでおく。

などなど、、手を考えてみたのですが、もっと簡単で直観的な解決方法に至りました。

多分、【WordPress】のことですから、「何かしらの仕組みを使用してサーバーサイドで呼び出してー」という手があったと思うのですが、 本解決法は圧倒的な学習コストの低さ。

他にも【WordPress】使ってる時に気になるのが、「PHPで直接記述できない(記事投稿で<?php ~~と書いても、文字列になってしまう)」という煩わしさがあるので、そちらも強引に解決できないか思案してみます。

コメントを残す

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