WordPressのClassic EditorでBlogの投稿にJavaScriptを追加

WordPressのClassic Editorでページ(Page)あるいはBlogの投稿(Post)にJavaScriptを追加する方法のメモになります。

補足：
Google ChartsのJavaScriptで描画したグラフをWebページに貼り付ける簡単な方法を調べていました。

WordPressのBlogへの投稿には、最近、Classic EditorのTextタブを利用していますが、JavaScriptをClassic EditorのText入力欄にそのまま入力してもJavaScriptとしてブラウザで処理されません。

少し検索して調べ、こちらのリンクの方法を試しました。試した方法は Method 3. Adding Javascript Code Inside WordPress Posts or Pages Using a Plugin に記載されていた方法です。

1. Code Embedプラグインをインストールし、有効化(Activate)します。Classic Editorプラグインをインストールしていなければ、こちらもインストールし、有効化(Activate)します。

2. Classic Editorのテキスト入力ページ右上の表示オプション(Screen Options)をクリックし、

カスタムフィールド(Custom Fields)のチェックボックスにチェックを入れます。

3. Classic Editorのテキスト入力欄の下にあるカスタムフィールド(Custom Fields)で「カスタムフィールドを追加(Enter new)」をクリックします。

4. カスタムフィールド(Custom Fields)の名前(Name)の欄にCODEで始まる文字列を入力します。値(Value)の欄には追加するJavaScriptを入力します。名前(Name)と値(Value)を入力したら「カスタムフィールドを追加(Add Custom Field)」をクリックし、カスタムフィールドを追加します。

下の図の例では、名前(Name)の欄にCODEGoogleLineChartExample1を入力し、値(Value)の欄に表示したいGoogle ChartsのJavaScriptを入力しています。

このブログでは、Google Chartsの下記のサンプルコードを値(Value)の欄に入力しました。下記のJavaScriptのサンプルコードはidがcurve_chartのHTML要素を参照しています。

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>

5. Classic Editorのテキスト入力欄に下記のように入力すると、

{{CODEGoogleLineChartExample1}}
<div id="curve_chart" style="width: 100%; height: 500px;"></div>

下の図のようなグラフが表示されます。

下記のコードがカスタムフィールド(Custom Fields)の値(Value)の欄に入力したJavaScriptに置き換わり、

{{CODEGoogleLineChartExample1}}

下記のコードを入力した位置にグラフが表示されます。ここで、idにはGoogle Chartsを使用したJavaScriptのgetElementById(‘###’)で指定した文字列###を指定します。今回の例ではidはcurve_chartになります。描画領域の幅と高さは下記のコードのwidthとheightで指定します。

<div id="curve_chart" style="width: 100%; height: 500px;"></div>

返信を残す返信をキャンセル