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接続です。
https://ataruproject.com/mac-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を使うためのプラグインを作成してみたいものです（笑）