Editor Template Files

サンプルの使い方

サンプルテンプレートの設置

  1. 「Editor Template Files」のプラグインフォルダー内の「sample」フォルダー一式をコピーします。

    サンプルテンプレートのフォルダーの場所:
    /wp-content/plugins/editor-template-files/sample/〜

  2. コピーしたサンプルフォルダーを、使用しているテンプレートフォルダー内に移動して設置します。

    移動先:
    /wp-content/themes/Your Theme Folder/sample/〜

  3. 移動させたサンプルフォルダーのフォルダー名を「editor-template-files」に変更します。

    参考:
    /wp-content/themes/Your Theme Folder/editor-template-files/〜

    以上で、使用自体はできます。
    エディタースタイルや値の置き換えなどを体験したい場合は、下記も設定してみてください。

  4. サンプルテンプレート用のエディタースタイルを設定します。

    テーマフォルダ内のfunctions.phpに以下のコードを追加してください。

    add_editor_style( 'custom-editor-style.css' );

  5. 「値の置き換え」のサンプルを確認するための設定をします。

    テーマフォルダ内のfunctions.phpに以下のコードを追加してください。

    									
    										add_filter('etf_tpl_values', 'hoge');
    
    										function hoge( $values ) {
    										global $post_id;
    
    										$values['sample_value'] = 'Editor Template FilesSample Page !!';
    										$values['date'] = get_the_time( 'Y-m-d', $post_id );
    
    										$values['etf_plugin_autor'] = 'hana';
    
    										return $values;
    										}​
    									
    								

お疲れ様でした!サンプルの設定は以上で終わりです。

サンプルテンプレートの使い方

上記で設定か完了したら、管理画面から確認をしてみます。

  1. WordPress管理画面から、投稿などTInyMCEエディターがある投稿ページを開きます。

  2. テンプレートダイアログを開きます。

    • 「挿入」>「Template」から

    • テンプレートボタンから

  3. 選択画面で設置してあるテンプレートが選択できるようになっています。

  4. ひとまず「Sample Template」を選択します。

  5. 「ok」でテンプレートを挿入します。

  6. テンプレートが挿入されました!

編集不可・可能領域の確認

編集不可・可能で設定してある部分を確認してみます。

  1. 下記をクリックして編集してみます。

    編集できません。。
    編集不可に設定してあるためです。

  2. 下記をクリックして編集してみます。

    編集ボタンが出てきました。
    ここでは画像を囲っているボックスに編集可能が設定されているため、ボックス内であれば編集ができます。

  3. 下記を確認します。

    リンク編集ボタンができました。
    ここではaタグに編集可能設定をしているため、リンクの設定のみ編集可能であることが確認できます。

「値の置き換え」の確認

  1. テンプレート選択画面で、下記のようなプレビューが確認できました。

    {$sample_value}や画像もリンクが切れていますね。

  2. 「ok」してテンプレート挿入すると、表示されているのがわかります。

    これは予め設定した値に置き換わって、挿入されているためです。

  3. 置き換わった部分についてみていきます。

    サンプル設置 5 でfunctions.phpに設定した値に変わっています。

    									
    										add_filter('etf_tpl_values', 'hoge');
    										function hoge( $values ) {
    										global $post_id;
    
    										$values['sample_value'] = 'Editor Template FilesSample Page !!';
    										$values['date'] = get_the_time( 'Y-m-d', $post_id );
    
    										$values['etf_plugin_autor'] = 'hana';
    
    										return $values;
    										}
    									
    								

    テンプレート内

    {$sample_value}

    Editor Template Files<br>Sample Page !!

    functions.php

    									
    										$values['sample_value'] = 'Editor Template FilesSample Page !!';
    									
    								

    で設定されています。

    {$date}

    「投稿の作成日」が入ります。
    新規投稿の場合には、現在の日付。
    既に保存済みの場合は、記事作成日が入っています。

    functions.php

    									
    										$values['date'] = get_the_time( 'Y-m-d', $post_id );​
    									
    								

    で設定されています。

    get_the_time()は、wordpressのテンプレートタグです。
    このようにテンプレートタグなどを設定すると、テンプレート読み込み時に記事によって値を変えたりすることが可能となります。