Webデザインこんにちは!PHPもキライじゃないけど、3度のメシよりJavaScriptが好き。WordPressでブログ記事を書く時に、どの記事にも型的な文章を入れ込みたい、ということありませんか?定型文を毎回コピペするのでもいいのですが、定型文を書き換えたくなった時に全ての記事を書き換える、というのは手間ですね。プラグインを導入しようかな〜というのはちょっと待って下さい。プラグインはサイトが重くなるし、テンプレートとの相性によってサイトが壊れることもあります。PHPで書くか〜、というのもちょっと待って下さい。PHPはテンプレートの実装によってやり方が異なったりして、WordPressの仕組みに関する知識が必要で、ちょっと敷居が高い。いう訳で、恒例(!?)の「WordPressプラグイン無しでやろうシリーズ」ということで、ブログ記事に固定ページのコンテンツをプラグインもPHPでも無い方法で埋め込む方法です。固定ページを使った定型文の埋め込みブログ記事に定型文章を埋め込むために、固定ページを使ったやり方をご紹介します。API呼び出しで実現します。API?なにそれ?と思った方は、下の記事を見てみて下さい。自称、週末Webデザイナー、詐称、週末フランス料理人、の、しずかなかずしです。Interface)です。APIを呼び出す簡単なJavaScriptのコードを入れ込んで定型文の埋め込みを実現します。仕組みは以下のようなイメージになります。固定ページを用意するまずは定型文を固定ページで作ります。サンプル的に以下のようなページを作りました。下の図のように、固定ページの「編集」画面でURLスラッグを指定します(デフォルトだと、ページタイトルから自動的に生成されます)。URLスラッグを後で使うので、メモっておきます。APIを呼び出すコード次に、「投稿」を用意します。編集画面で「カスタムHTML」ブロックを挿入します。「カスタムHTML」の中に以下のコードを「コピペ」します。指定している文字列は、先程の固定ページのURLスラッグで指定しているものに置き換えて下さい。2行目のdiv要素のstyle=もわかりやすいように色をつけているだけなので不要であれば削除してください。このdiv要素の中に固定ページの内容が埋め込まれます。上記のコピペのコードが何をしているのか、簡単に解説します。ここに固定ページの中身を埋め込みます。id属性はページで一意である必要があります。以下のJavaScriptで参照しています。div要素をJavaScriptで取り出し、element変数に代入します。getElementByIdは、1行目のdiv要素で指定したid属性と同じものである必要があります。APIを呼び出しています。APIのURL、/wp-json/wp/v2/pages?slug=’teikei-sample-for-plugin-php-alternative’&_fields=contentは、特定slugで検索して結果をもらう形式です。そのページのcontentフィールドだけを送ってもらう指定をしています。APIの戻り値(JSON形式)は、ページのリストになっているので、その中の1つを取り出します。最近ブログをサボり気味のしずかなかずしです。実際の表示は以下のようになりました。薄いブルーの背景色のテキストが、固定ページ「固定ページを記事に埋め込むための定型文」の本文です。見事に埋め込まれています。プラグインも使わず、PHPのコーディングも不要。コピペでできちゃいましたね。世界一シンプル!drag&dropでファイルアップロードする。...WordPress.comからの離脱(引越し)の作戦その3:ドメイン設定Wordpress.comから、レンタルサーバー「エックスサーバー」への引越し。...WordPressで音を鳴らすボタンを設置する。10版を遅延なく使う接続方法。して声が遅れるの?自宅のネットワークでIPアドレスを固定する方法。しくみを基礎から理解しよう20年近く使っているGE冷蔵庫が復活した!これはまだまだ使えるぞ〜TP-LinkルータのDMZで自宅サーバーのポート開放!セキュリティーに注意して使い分け自宅サーバのルーター設定はUPnPでポート開放。「家」アナロジーで解説!最新のAirScreenで画面をキャスト。ネットワーク上の機器を探す!あきれるほど便利なネットワーク解析アプリAndroidスマホからAirScreenへのキャストする方法。特急ロマンスカーで箱根へ。stickでAirScreenを使う。free".ホームメニューSNS上へ。