wordpressで一手間加えてiframeを利用する

どうも、このブログはエンジニアらしくゴリゴリ開発して運用しているのではなく、wordpressで楽して安全に簡単に適当に作っているわけですが、備忘録としてまとめておくにはやはりそれでは限度があります。

  • phpでこんな物作った!
  • vue.jsの動き
  • cssで作った(これはまだ許容範囲)

など、素のwebページを載せたくなったりするんです。

そんな時にhtml標準のiframeタグを使えばブラウザインブラウザで表示することができます。(まあCodePenあたりでもできます。)

なので、今回は素のwebページを作成してiframeでwebページに仕込むところをまとめておきます。

環境:
ワードプレスのバージョン:5.4.2
ワードプレステーマ:luxeritas

固定ページで使用するデフォルトテンプレートをphpで作成する

一応、phpを知らなくてもコピペだけでなんとかいけます。

luxeritasのデフォルトテンプレート用ファイルを探します。固定ページのテンプレートファイルの名前は基本’page.php’らしいです。

/wp-content/themes/luxeritas ここのファイル一覧です。page.php発見。

ls
404.php                         htaccess_en.txt        readme_en.txt
add-amp-analytics.php           images                 related.php
add-amp-body.php                inc                    respond.php
add-analytics-head.php          index.php              samples
add-analytics.php               js                     screenshot.jpg
add-footer.php                  languages              search.php
add-header.php                  license.txt            searchform.php
archive.php                     list-content.php       securimage
breadcrumb.php                  list-excerpt-card.php  sidebar-amp.php
captcha.php                     list-excerpt-tile.php  sidebar-left.php
comments.php                    list-excerpt.php       sidebar.php
css                             loop-grid.php          single.php
default-template                loop-normal.php        sns-front.php
editor-style-gutenberg.min.css  loop.php               sns.php
editor-style.css                meta.php               style-amp.css
fonts                           mobile-buttons.php     style-amp.min.css
footer.php                      navi.php               style.async.min.css
functions.php                   navigation.php         style.css
head-band.php                   page-nosidebar.php     style.min.css
header.php                      page.php               styles
home.php                        pages                  templetes
htaccess.txt                    readme.txt             webfonts

中身を一部抜粋

cat page.php
<?php
/**
 * Luxeritas WordPress Theme - free/libre wordpress platform
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * @copyright Copyright (C) 2015 Thought is free.
 * @license http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 * @author LunaNuko
 * @link https://thk.kanzae.net/
 * @translators rakeem( http://rakeem.jp/ )
 */

テーマの定義らしきものがありますね。

さらに、テンプレートがワーワー構築されているので、意味とかぐぐりながら削れるだけ削って、最小限のテンプレート状態にまで持っていきます。

それがこちら。

<?php
/**
 * Template Name: WhiteSpace
 * Template Post Type: post, page
 *
 */
?>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover">
  <meta name="robots" content="noindex">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-Control" content="no-cache">
  <title>iframe</title>
</head>

<?php
if( have_posts() ) :
    while( have_posts() ) :
        the_post(); ?>
        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <?php the_content(); ?>
        </div>
    <?php endwhile;
endif; ?>

ヘッダー呼び出しなし!フッターもサイドバーもnavもサブブロックもない、固定ページだけを呼び出せるスーパーシンプルなテンプレートが完成しました。

3行目の、Template Name: WhiteSpace でテンプレート名が付けられます。

これを、templetesフォルダを作成して任意の名前で保存。

pwd
# /wp-content/themes/luxeritas/

mkdir templetes
cd templetes

vi my-temp.php

コマンドラインじゃなくても、FTPソフトでディレクトリ作れます。ググってみてください。コマンドラインなら、ssh接続です。

ファイルが保存できれば準備完了です。

固定ページを作成する

iframeで埋め込みたいwebページを固定ページとして作成します。

htmlファイルを作ってそれをそのまま突っ込む形です。cssは<style>タグでオケです。jsも<script>でオケです。

デフォルトテンプレートから先ほど作成したテンプレートを選択します。ちゃんと表示されているか確認してみましょう。

iframeタグで入れ込む

作成した固定ページを表示してURLを控えます。iframeタグのsrc属性にこれを貼り付けます。

次のようにiframeを記述します。title属性は、あってもなくても、width属性は100%でheight属性は程よく。(整数で記述)

<iframe id="inlineFrameExample" title="Inline Frame Example" width="100%" height="500" src="https://ataruproject.com/page-1426">
</iframe>

これを表示すると

ログイン画面のサンプルが表示できましたね。

これであとは、このカスタムテンプレートを選択して固定ページを作成しておけばいつでもiframeが利用できます。

そのうち、iframeを使うためのプラグインを作成してみたいものです(笑)