読むと、お金に強くなる

読むだけで、お金に強くなるブログ

【コピペOK】wordpress記事中で外部HTMLを読み込むショートコード

ガクマーケティングの井上
  • メンテナンス楽ちん
  • php使えなくてもOK
ガクマーケティングの記事おすすめポイント
  • 各記事に同じパーツを設置したい人

こんにちは。WEBマーケターの井上です。今回は、自分のサーバーにおいたHTMLを、WordPressの記事中で読み込む方法をご紹介します。

自分のサーバーにおいたHTMLを編集すれば、サイト全体に反映されます。メンテナンスの時間短縮ができますね!

こんなことができます

  • 自分で作ったHTMLを、サーバーに配置
  • WordPressの記事中で、そのHTMLを読み込ませる
  • 外部HTMLを編集すれば、全ページが一気に更新される
  • 保守性が高い!簡単メンテナンス!

私が作ったファイルはこんな感じ。

WordPressの記事中で外部HTMLを読み込む

記事本文の1番下で、カテゴリーリンクへ誘導するHTMLをつくりました。

ちなみに、ショートコードで記載しています。記事1つ1つにショートコードを設置する初回コストはかかります。ご注意くださいね。

グーテンベルクなら「再利用ブロック」で代用可能

グーテンベルクエディタをお使いですか? それなら「再利用ブロック」を使うのがオススメです。

WordPressが外部HTMLを読み込むなら、再利用ブロックがおすすめ

グーテンベルクの再利用ブロックは、「再利用ブロックのまま編集」をかければ使用済みの再利用ブロックも全部更新されます。

クラシックエディタに慣れている方には、グーテンベルクはちょっと使いにくいかもですが、 今後はグーテンベルクが主流になっていくと思います。この辺で乗り換えてみるのはいかがでしょうか。

さて、 以下からは本題に戻ります。WordPress記事中で外部HTMLを読み込むショートコードを作ります。

所定のファイルをFTPソフトで配置する

同じ様に作ってみてください。

  1. バックアップを取る
  2. 子テーマの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’);
  3. 子テーマのフォルダに、次のPHPファイル(ex.php)を設置
    ファイルの中身はこのコードをコピペ
    <?php echo ‘Hello, World!’; ?>

     

    WordPressで外部HTMLを読み込む準備

  4. テスト用のWordPress記事にショートコード [★sc file=’ex’] を記載 (星は消してください!)
  5. 記事をプレビューし、「Hello,world!」出力されていることを確認するWordPressの記事中で、HTMLを読み込む
  6. 2で作成したPHPファイルの中身を編集する
  7. 完成!

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を読み込む方法をご紹介いたしました。

  1. バックアップを取る
  2. 子テーマの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’);
  3. 子テーマのフォルダに、次のPHPファイル(ex.php)を設置
    ファイルの中身はこのコードをコピペ
    <?php echo ‘Hello, World!’; ?>
    WordPressで外部HTMLを読み込む準備
  4. テスト用のWordPress記事にショートコード[★sc file=’ex’] を記載 (星は消してください!)
  5. 記事をプレビューし、出力されていることを確認する
  6. 2で作成したPHPファイルの中身を編集する
  7. 完成!

WordPressの記事中でPHPをかければ、わざわざショートコートなどを使わなくても良いのですがね。WordPressの記事中では、基本PHPは動きません。(セキュリティーの観点から)

AMPでは動作しないので、グーテンベルクの再利用ブロックを使うのがオススメ。グーテンベルクも、なかなか便利ですよ。

アバター
ガクマーケティングhttps://item-for-you.com/
作家。1994年生まれ。北海道育ち。ライターと、ウェブマーケターの2足のわらじをはいた、おじさんのような顔をした若造。

あわせて読みたい

ランキング

最新記事

ライター紹介

アバター
作家。1994年生まれ。北海道育ち。ライターと、ウェブマーケターの2足のわらじをはいた、おじさんのような顔をした若造。

最新記事

カテゴリー

公務員試験メニュー