- メンテナンス楽ちん
- php使えなくてもOK
- 各記事に同じパーツを設置したい人
こんにちは。WEBマーケターの井上です。今回は、自分のサーバーにおいたHTMLを、WordPressの記事中で読み込む方法をご紹介します。
自分のサーバーにおいたHTMLを編集すれば、サイト全体に反映されます。メンテナンスの時間短縮ができますね！
こんなことができます
- 自分で作ったHTMLを、サーバーに配置
- WordPressの記事中で、そのHTMLを読み込ませる
- 外部HTMLを編集すれば、全ページが一気に更新される
- 保守性が高い！簡単メンテナンス！
私が作ったファイルはこんな感じ。
記事本文の1番下で、カテゴリーリンクへ誘導するHTMLをつくりました。
ちなみに、ショートコードで記載しています。記事1つ1つにショートコードを設置する初回コストはかかります。ご注意くださいね。
グーテンベルクなら「再利用ブロック」で代用可能
グーテンベルクエディタをお使いですか？ それなら「再利用ブロック」を使うのがオススメです。
グーテンベルクの再利用ブロックは、「再利用ブロックのまま編集」をかければ使用済みの再利用ブロックも全部更新されます。
クラシックエディタに慣れている方には、グーテンベルクはちょっと使いにくいかもですが、 今後はグーテンベルクが主流になっていくと思います。この辺で乗り換えてみるのはいかがでしょうか。
さて、 以下からは本題に戻ります。WordPress記事中で外部HTMLを読み込むショートコードを作ります。
所定のファイルをFTPソフトで配置する
同じ様に作ってみてください。
- バックアップを取る
- 子テーマのfunction.phpに下記コードをコピペ
// 記事中ショートコード
function sc_php($atts = array()) {
shortcode_atts(array(
‘file’ => ‘default’
), $atts);
ob_start();
include(STYLESHEETPATH . “/$atts[file].php”);
return ob_get_clean();
}
add_shortcode(‘sc’, ‘sc_php’); - 子テーマのフォルダに、次のPHPファイル（ex.php）を設置
ファイルの中身はこのコードをコピペ
<?php echo ‘Hello, World!’; ?>
- テスト用のWordPress記事にショートコード [★sc file=’ex’] を記載 （星は消してください！）
- 記事をプレビューし、「Hello,world!」出力されていることを確認する
- 2で作成したPHPファイルの中身を編集する
- 完成！
function.phpなどを編集するので、必ずバックアップをとってくださいね！
FTPソフトの使い方などは、インターネット上にたくさん記事が出回っていますのでそちらを調べてみてください。
出力するHTMLを編集する
テスト用のWordPress記事でショートコードがうまく動いているようなら、ex.phpを編集してください。
拡張子は.phpですが、中身はただのHTMLでokです。<html><head><body>などのタグは必要なく、出力する部分だけでOK！
CSSも記入して大丈夫です。WordPressのカスタマイズCSSに記入すると、ショートコードを記入していない関係ないページでもCSSを読み込むので、phpファイルの中に描いちゃった方がいいのかも。
注意）AMPでは使えません
AMPでは使えないんです。。。私も作ってから愕然としましたよ。。。
結局、ブロックエディタの再利用ブロックを使っています。再利用ブロックも便利ではあるんですが、できればショートコードがよかった。。。
AMPではスクリプトなどは基本的に動作しません。AMPを使用しているのであれば、 前述の再利用ブロックを使った方法や、AMPを解除することをご検討ください。
まとめ：【コピペOK】wordpress記事中で外部HTMLを読み込むショートコード
WordPressの記事中で、自分で作ったHTMLを読み込む方法をご紹介いたしました。
- バックアップを取る
- 子テーマのfunction.phpに下記コードをコピペ
// 記事中ショートコード
function sc_php($atts = array()) {
shortcode_atts(array(
‘file’ => ‘default’
), $atts);
ob_start();
include(STYLESHEETPATH . “/$atts[file].php”);
return ob_get_clean();
}
add_shortcode(‘sc’, ‘sc_php’); - 子テーマのフォルダに、次のPHPファイル（ex.php）を設置
ファイルの中身はこのコードをコピペ
<?php echo ‘Hello, World!’; ?> - テスト用のWordPress記事にショートコード[★sc file=’ex’] を記載 （星は消してください！）
- 記事をプレビューし、出力されていることを確認する
- 2で作成したPHPファイルの中身を編集する
- 完成！
WordPressの記事中でPHPをかければ、わざわざショートコートなどを使わなくても良いのですがね。WordPressの記事中では、基本PHPは動きません。（セキュリティーの観点から）
AMPでは動作しないので、グーテンベルクの再利用ブロックを使うのがオススメ。グーテンベルクも、なかなか便利ですよ。
「日本一変なキャリアの元公務員」
北海道在住のライターです。
olbb(株)取締役、ガクマーケティング代表
市役所と北海道庁職員を併任した後、WEBマーケターに転職。2年後に独立し、現在はライター＆経営者をしています。
「働き方をもっと自由に、だけど堅実に」がモットー。
■もう少し詳しく
≫プロフィール・お仕事の実績
≫お問い合わせはコチラ