テンプレート on qwerty.work

【Wordpress】TCDテーマ「GENESIS」関連メモ

Mon, 03 Jun 2024 00:00:00 +0000

TCDのワードプレステンプレート「GENESIS（ジェネシス）」でサイト制作した際に参考にしたページのメモ。

TCDテンプレート用のCSSリファレンス

GENESIS用のタグとCSS

https://demo.tcd-theme.com/tcd103/quicktags

共通CSS

TCDのテンプレートで共通して使えるCSS集。

すべてのTCDテーマで使える｜便利なCSS・汎用クラスの使い方 | ワードプレステーマTCD (tcd-theme.com)

TCDテーマ「GENESIS」の公式ページ

WordPressテーマ「GENESIS（TCD103）」 (tcd-theme.com)

デモサイト

製造業向けのWordpressテンプレートメモ

Thu, 17 Aug 2023 13:11:58 +0900

製造業のサイトをサイトを制作することになり、お知らせの投稿が必要になることからCMSはWordpressを使うことになったものの、どのテンプレートを使えばいいか悩んだので、良さそうな物とピックアップ。

シングルページ・ランディングページ（LP）向け

Minimal Cafe

シングルページだけどお知らせを投稿する機能が欲しいといったシンプルなサイト向け

価格：9,999円（税込み）

https://minimalwp.com/24812/ https://minimalwp.com/24812/

My Song

シングルページだけどお知らせを投稿する機能が欲しいといったシンプルなサイト向け

価格：9,999円（税込み）

https://minimalwp.com/15689/ https://minimalwp.com/15689/

製造業向けテンプレート

New Standard

New Standardは、株式会社ninoyaが販売しているWordPressテンプレート。 Web集客をふまえた機能が豊富でありながら、誰もが直観的な操作で運用できるよう考えてつくられています。サイトの立ち上げから見込み顧客の獲得までカバーできるのが特徴です。LPサイトの制作できます。

価格：29,700円（税込み）

https://newstd.net/ https://newstd.net/

TCD065 NANO

中堅・大企業・BtoB向けコーポレートサイト用WordPressテーマ

価格：34,800円（税込み）

https://tcd-theme.com/tcd065 https://tcd-theme.com/tcd065

Lightning

Lightningは、株式会社ベクトルが配布しているWordPressテンプレートです。シンプルでカスタマイズしやすいデザインになっています。ブログにも対応していますが、多機能プラグイン「ExUnit」を併用することで、ビジネスサイトとして十分な機能を備えることもできます。

価格：無料（有料版もある）

https://lightning.vektor-inc.co.jp/ https://lightning.vektor-inc.co.jp/

Business Press

Business Pressは、WordPressテーマデザイナーの内海隆雄氏が配布しているテンプレート。シンプルで美しいビジネスサイトを目指して作られています。個人をはじめ、団体や中小企業など幅広いジャンルの内容でつくることが可能です。基本的なカスタマイズができるほか、日本語が美しく見えるよう調整されています。

価格：無料

https://businesspress.jp/ https://businesspress.jp/

Business Press

sotypeは、Frontline Marketing Japan株式会社が販売しているWordPress。日本語テンプレートにとことんこだわり、日本語Webフォント「Google NotoSans」を軽量化して実装しています。なかでも一番人気なのは、「MAJESTIC+」。シンプルなデザインながらも強烈なインパクトでユーザーをサイトに引き込みます。

価格：14,700～27,000円（税込み）

https://isotype.blue/ https://isotype.blue/

isotype

isotypeは、Frontline Marketing Japan株式会社が販売しているWordPress。日本語テンプレートにとことんこだわり、日本語Webフォント「Google NotoSans」を軽量化して実装しています。なかでも一番人気なのは、「MAJESTIC+」。シンプルなデザインながらも強烈なインパクトでユーザーをサイトに引き込みます。

価格：14,700～27,000円（税込み）

https://isotype.blue/ https://isotype.blue/

テンプレート販売サイト「WebStock」にあるテンプレート

TEKMOS

トップページ、企業情報、代表挨拶、会社概要、商品紹介、お知らせ、お知らせ詳細、採用情報、お問い合わせ、サンクスページなど、10ページ程度のコーポレートサイト向き

価格：69,300円（税込み）

https://nbc-webstock.com/product/w1001/ https://nbc-webstock.com/product/w1001/

MI Partners

トップページ、お知らせ、お知らせ詳細、事業内容、代表挨拶、会社情報、お問い合わせ、サンクスページ、プライバシーポリシー、マップなど、9ページ程度のコーポレートサイト向き

価格：108,900円（税込み）

https://nbc-webstock.com/product/w0901/ https://nbc-webstock.com/product/w0901/

【EC-CUBE】関連商品プラグインで表示される商品一覧をカスタマイズしたいとき

Fri, 18 Feb 2022 14:55:37 +0900

デフォルトのソース

何もいじっていなければ、テンプレートは以下のようになっているはずです。これをカスタマイズします。

/app/Plugin/RelatedProduct4/Resource/template/front/related_product.twig

<script>
    $(function () {
         $('#RelatedProduct-product_area').appendTo($('.ec-layoutRole__main, .ec-layoutRole__mainWithColumn, .ec-layoutRole__mainBetweenColumn'));
     });
</script>
<div id="RelatedProduct-product_area" class="ec-shelfRole">
    <ul class="ec-shelfGrid">
        {% for RelatedProduct in Product.RelatedProducts %}
            {% set ChildProduct = RelatedProduct.ChildProduct %}
            {% if ChildProduct.Status.id == constant("Eccube\\Entity\\Master\\ProductStatus::DISPLAY_SHOW") %}
                  <li class="ec-shelfGrid__item">
                    <a href="{{ url('product_detail', {id : ChildProduct.id}) }}">
                        <p class="ec-shelfGrid__item-image">
                            <img src="{{ asset(RelatedProduct.ChildProduct.main_list_image|no_image_product, 'save_image') }}">
                        </p>
                        <p>{{ RelatedProduct.ChildProduct.name }}</p>
                         <p>
                              {% if RelatedProduct.ChildProduct.hasProductClass %}
                                  {% if RelatedProduct.ChildProduct.getPrice02Min == RelatedProduct.ChildProduct.getPrice02Max %}
                                      {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}
                                  {% else %}
                                     {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }} ～ {{ RelatedProduct.ChildProduct.getPrice02IncTaxMax|price }}
                                  {% endif %}
                              {% else %}
                                  {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}
                              {% endif %}
                          </p>
                      </a>
                      <span>{{ RelatedProduct.content|raw }}</span>
                  </li>
              {% endif %}
         {% endfor %}
      </ul>
  </div>

related-product-plugin/related_product.twig at 4.0 · EC-CUBE/related-product-plugin · GitHub

カスタマイズ後はEC-CUBEの管理画面にログインして以下の画面で「登録」ボタンを押さないとページに反映されないので注意してください。

[コンテンツ管理]-[ページ管理]-[商品詳細ページ]

カスタマイズに使った変数

  変数
  内容




  {{ RelatedProduct.ChildProduct.id }}

  {{ ChildProduct.id }}
  商品ID


  {{ RelatedProduct.ChildProduct.code_min }
  商品コード

  {{ RelatedProduct.ChildProduct.name }}
  商品名


  {% for hoge in ChildProduct.ProductClasses %}

  　{{hoge.id }}

  {% endfor %}
  商品クラスID

カートに入れるために必要なProductClassのIDが取得できずに困りましたが、以下のページが参考になりました。``文を使って取得することが必要でした。

https://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=17413&forum=5 https://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=17413&forum=5

{% for hoge in Product.ProductClasses %}
　{{hoge.id }}
{% endfor %}

デバッグしたいとき

Product.idなど、Productに関して取得できる変数や値の内容を知りたいということがありました。

.envファイルを開いてデバッグモードにして、商品詳細ページのテンプレート（detail.twig）に{{dump(Product)}} を追記して、商品詳細ページをブラウザで表示すると変数や配列に入っている値を確認できます。

デバッグモードに変更する方法と追記するコード

.envファイルの変更

#本番モード
APP_ENV=prod
APP_DEBUG=0
 ↓
#デバッグモード
APP_ENV=dev
APP_DEBUG=1

テンプレートに追記するコード

Prodect関連の配列や値を確認したい場合。以下のコードをTWIGテンプレートに追記すると配列の内容が画面上に表示されます。

{{dump(Product)}}

参考ページ

https://homupedia.com/eccube4-template-data.html https://homupedia.com/eccube4-template-data.html

作成したソース

<script>
    $(function () {
        $('#RelatedProduct-product_area').appendTo($('.ec-layoutRole__main, .ec-layoutRole__mainWithColumn, .ec-layoutRole__mainBetweenColumn'));
    });
</script>
<div id="RelatedProduct-product_area" class="ec-shelfRole">
<h3>関連商品</h3>
<table class="table table-striped table-hover rp-list-table">
<thead>
    <tr>
        <td>商品コード</td><td>商品名</td><td>金額<small>（税込）</small></td><td>数量</td><td>カート</td>
    </tr>
</thead>
<tbody>
{% for RelatedProduct in Product.RelatedProducts %}
{% set ChildProduct = RelatedProduct.ChildProduct %}
{% if ChildProduct.Status.id == constant("Eccube\\Entity\\Master\\ProductStatus::DISPLAY_SHOW") %}
    <tr class="ec-productRole__actions test">
    <form name="form{{ ChildProduct.id }}" id="productForm{{ ChildProduct.id }}" action="{{ url('product_add_cart', {id:ChildProduct.id}) }}" method="post">
        <td><a href="{{ url('product_detail', {id : ChildProduct.id}) }}">{{ RelatedProduct.ChildProduct.code_min }}</a></td>
        <td>{{ RelatedProduct.ChildProduct.name }}{% for ChildProductClass in ChildProduct.ProductClasses %}&nbsp;<small>（デバッグ用ClassID:{{ChildProductClass.id }}）</small>{% endfor %}</td>
        <td>
            {% if RelatedProduct.ChildProduct.hasProductClass %}
                {% if RelatedProduct.ChildProduct.getPrice02Min == RelatedProduct.ChildProduct.getPrice02Max %}
                    {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}
                {% else %}
                    {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }} ～ {{ RelatedProduct.ChildProduct.getPrice02IncTaxMax|price }}
                {% endif %}
            {% else %}
                {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}
            {% endif %}
        </td>
        <td class="ec-numberInput"><input type="number" id="quantity{{ ChildProduct.id }}" name="quantity" required="required" min="1" maxlength="9" class="quantity form-control" value="1"></td>
        <td><div class="ec-productRole__btn">
            <button class="ec-blockBtn--action add-cart" data-cartid="{{ ChildProduct.id }}" form="productForm{{ ChildProduct.id }}" type="submit">{{ 'カートに入れる'|trans }}</button>
        </div></td>
    <!-- エラーになるので非表示 <input type="hidden" id="mode" name="mode" value="add_cart" />-->
    <input type="hidden" id="product_id{{ ChildProduct.id }}" name="product_id" value="{{ ChildProduct.id }}">
    {% for ChildProductClass in ChildProduct.ProductClasses %}
    <input type="hidden" id="ProductClass{{ ChildProduct.id }}" name="ProductClass" value="{{ChildProductClass.id }}">
    {% endfor %}
    <input type="hidden" id="_token{{ ChildProduct.id }}" name="_token" value="{{ csrf_token('Eccube\\Form\\Type\\AddCartType') }}" />
    </form>
    </tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>

商品詳細ページで使用するときの注意事項

form id=“form1"があるとうまく動かない

商品詳細ページにオリジナルのカートボタンを設置する際は、商品詳細ページのテンプレート（detail.twig）にあるメイン商品のカードボタン（``）をコメントアウトするなどして、無効または削除しないと関連商品プラグインのテンプレート（related_product.twig）に追加設置したカートボタンで商品がカートに入りませんでした。どうやらform1が優先されるみたいです。

モーダルがうまく動かないとき

「カートに入れる」ボタンを押したときに表示されていたモーダルウィンドウが表示されなくなってしまったときは、商品一覧のテンプレート（list.twig）を参考に商品詳細ページのテンプレート（detail.twig）にある以下の部分を変更したら動きました。これがモーダルウィンドウ（ec-modal）を発火させるトリガーの要素の指定みたいです。

$form = $('#form1');
 ↓
var $form = $(this).parents('.test').find('form');

この上あたりにある規格チェックや数量チェックの一部JSが邪魔してうまく修正できなかったので、そのチェック部分はコメントアウトしました。

その他参考ページ

https://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&order=DESC&topic_id=23859&forum=11 https://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&order=DESC&topic_id=23859&forum=11

【EC-CUBE】この好みの場所に『カートに入れる』ボタンを設置したいとき

Thu, 17 Feb 2022 17:16:29 +0900

『カートに入れる』ボタンを自作したい

オリジナルの**『カートに入れる』**ボタンを作成したいときに調べたときのことをメモ。

対象バージョンは4.1.1

参考ページ

https://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&topic_id=25215&forum=10 https://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&topic_id=25215&forum=10

ここにあったソースをちょっと改造

上記ページにあった参考のソースのままではなぜか、{{ product_class_id }}を取得することができなかったので、{{ form.ProductClass.vars.value }}に変更したら取得できました。このコードを商品ページのテンプレート（/app/template/default/Product/detail.twig）に置いてテストしてみたところ、ちゃんとカートに入れることができました。

<div class="好きな名前">
  <form name="form{{ Product.id }}" id="productForm{{ Product.id }}" action="{{ url('product_add_cart', {id:Product.id}) }}" method="post">
    <div class="好きな名前">
      <div class="好きな名前"><span>数量</span>
        <input type="number" id="quantity{{ Product.id }}" name="quantity" required="required" min="1" maxlength="9" class="test5" value="1">
      </div>
    </div>
    <input type="hidden" id="product_id{{ Product.id }}" name="product_id" value="{{ Product.id }}">
    <input type="hidden" id="ProductClass{{ Product.id }}" name="ProductClass" value="{{ form.ProductClass.vars.value }}">
    <!--<input type="hidden" id="ProductClass{{ Product.id }}" name="ProductClass" value="{{ product_class_id }}">-->
    <input type="hidden" id="_token{{ Product.id }}" name="_token" value="{{ csrf_token('Eccube\\Form\\Type\\AddCartType') }}" />
  </form>
  <div class="ec-productRole__btn">
    <button class="ec-blockBtn--action add-cart" data-cartid="{{ Product.id }}" form="productForm{{ Product.id }}" type="submit"> 購入する </button>
  </div>
</div>

カートに入れるために必要な情報

カートに入れるためには「数量、商品ID、クラスID、トークン」の4つが揃っていないとエラーになるようです。

<input type="number" id="quantity{{ Product.id }}" name="quantity" required="required" min="1" maxlength="9" class="test5" value="1">
<input type="hidden" id="product_id" name="product_id" value="{{ Product.id }}">
<input type="hidden" id="ProductClass" name="ProductClass" value="{{ product_class_id }}">
<input type="hidden" id="_token" name="_token" value="{{ csrf_token('Eccube\\Form\\Type\\AddCartType') }}" />

トークンの部分は以下のコードでもいいみたいです。

<input type="hidden" id="_token" name="_token" value="{{ form._token.vars.value }}" />

純正コードの控え

<form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  {% if Product.stock_find %}
  <div class="ec-productRole__actions"> {% if form.classcategory_id1 is defined %}
    <div class="ec-select"> {{ form_widget(form.classcategory_id1) }}
      {{ form_errors(form.classcategory_id1) }} </div>
    {% if form.classcategory_id2 is defined %}
    <div class="ec-select"> {{ form_widget(form.classcategory_id2) }}
      {{ form_errors(form.classcategory_id2) }} </div>
    {% endif %}
    {% endif %}
    <div class="ec-numberInput"><span>{{ '数量'|trans }}</span>
 {{ form_widget(form.quantity) }}
      {{ form_errors(form.quantity) }} </div>
  </div>
  <div class="ec-productRole__btn">
    <button type="submit" class="ec-blockBtn--action add-cart"> {{ 'カートに入れる'|trans }} </button>
  </div>
  {% else %}
  <div class="ec-productRole__btn">
    <button type="button" class="ec-blockBtn--action" disabled="disabled"> {{ 'ただいま品切れ中です。'|trans }} </button>
  </div>
  {% endif %}
  
  {{ form_rest(form) }}
</form>

【EC-CUBE4】商品詳細ページをカスタマイズしたいときのメモ

Wed, 16 Feb 2022 17:02:53 +0900

テンプレートの場所

管理画面からテンプレートを編集

[コンテンツ管理]-[ページ管理]-[商品詳細ページ]

テンプレートの場所

eccubeディレクトリ/app/template/default/Product/detail.twig
または
eccubeディレクトリ/src/Eccube/Resource/template/default/Product/detail.twig

【EC-CUBE4】商品画像の最大サイズを制限して自動的にリサイズしてアップロードしたいとき。

Wed, 26 Jan 2022 11:37:19 +0900

アップロード画像の最大サイズを固定したい

EC-CUBEで商品写真をアップロードする際、誤ってリサイズせずに3000x2000ピクセルくらいの画像をアップロードしまうことがありました。デフォルトではサイズは無制限のようです。これをアップロードする際に自動的に800x800ピクセルまたは1000x1000ピクセルくらいにしたいと思い。どのようにしたらできるか調べると以下の参考ページを見つけることができ解決できたのでメモ。

対象バージョン：4.1.1

参考ページ

EC-CUBE4のファイルアップロードには「jQuery File Upload」が使われているようです。

https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing

https://web.bright-b.com/eccube4-image-size-64/ https://web.bright-b.com/eccube4-image-size-64/

手順

変更を加えるテンプレート

縦横のサイズ上限値を指定するためには以下のファイルに変更を加えます。

ec-cubeのディレクトリ/src/Eccube/Resource/template/admin/Product.twig

追記するコード

Product.twig の 131行目に以下のコードがあるかと思います。

$('#{{ form.product_image.vars.id }}').fileupload({
    url: "{{ url('admin_product_image_add') }}", 
    type: "post",
    sequentialUploads: true,
    dataType: 'json',
    dropZone: $('#upload-zone'),
    done: function(e, data) {
        $('.progress').hide();
        $.each(data.result.files, function(index, file) {
            var path = '{{ asset('', 'temp_image') }}' + file;
            var $img = $(proto_img.replace(/__path__/g, path));
            var $new_img = $(proto_add.replace(/__name__/g, count_add));
            $new_img.val(file);
            $child = $img.append($new_img);
            $('#thumb').append($child);
            count_add++;
        });
        hideThumbnail();
        updateSortNo();
    },

この間に追記します。

$('#{{ form.product_image.vars.id }}').fileupload({
    url: "{{ url('admin_product_image_add') }}",
    type: "post",
    sequentialUploads: true,
    dataType: 'json',
    dropZone: $('#upload-zone'),
    disableImageResize: false, //新規追加　画像のリサイズを許可
    imageMaxWidth: 1000, //新規追加　横幅の最大サイズ
    imageMaxHeight: 1000, //新規追加  縦幅の最大サイズ
    imageQuality: 0.7, //新規追加　リサイズした画像の画質
    done: function(e, data) {
        $('.progress').hide();
        $.each(data.result.files, function(index, file) {
            var path = '{{ asset('', 'temp_image') }}' + file;
            var $img = $(proto_img.replace(/__path__/g, path));
            var $new_img = $(proto_add.replace(/__name__/g, count_add));
            $new_img.val(file);
            $child = $img.append($new_img);
            $('#thumb').append($child);
            count_add++;
        });
        hideThumbnail();
        updateSortNo();
    },

オプションの説明

https://github.com/blueimp/jQuery-File-Upload/wiki/Options https://github.com/blueimp/jQuery-File-Upload/wiki/Options

これで、アップロード時にリサイズされた画像がアップロードされていると思います。

MixhostでMovable Typeのテンプレート更新時に403エラーが出るときはWAFが原因かも

Thu, 31 May 2018 20:12:46 +0900

テンプレートの更新をすると403エラー

レンタルサーバーを Mixhost に移転してから Movable Type のテンプレートを更新しようと [更新]ボタンを押すと 403エラーになりました。権限に関するエラーだと思いますが、管理画面にログオンできますし、新規投稿や記事の更新もできるのに権限がないとか考えられませんが、なぜかテンプレート更新で 403エラーになります。

以前のレンタルサーバーではこのようなエラー出ませんでした。Mixhost が悪いと言いたいわけではなく、いい意味でセキュリティが高いのかなと思います。

WAFを無効にしたら更新できた

Mixhost には ModSecurity という WAF がデフォルトで有効になっています。 WAF は** Web Application Firewall** の略でサイトを守るセキュリティ機能なのですが、この WAF を無効にしたら解決できるという記事をいくつか見つけたので、試しに無効にしてみました。ドメイン毎に無効にすることができるのですが、試しに全部無効にしてみました。

WAFを無効（オフ）にする方法

まず、Mixhostの管理画面 [cPanel]-[セキュリティ]-[ModSecurity]を開きます。

[無効]ボタンを押します。特定のドメインのみ [無効（オフ）] にしたい場合は指定するドメインの [ステータス]スイッチをクリックして [無効（オフ）] にします。

[すべて無効にする]をクリックします。

すると、各ドメインのステータスが全部 [オフ] になり完了です。

この状態で Movable Type のテンプレートの更新ボタンを押したら正常に更新できました。

解決できたけど、これでいいの？

とりあえずテンプレートの更新はできるようになりましたが、更新の度にWAFを [無効（オフ）] にしたり、常時 [無効（オフ）] にしないとけないので解決とはいけない感じですね。CloudFlare をかましているのがいけないのかな？常時 [有効（オン）] の状態で更新ができるような方法がベストなのですが、その方法はまた今度探してみたいと思います。

WordPressで403エラーが出た場合も

この症状は WordPress でも出る場合があるようです。WordPress で 403エラーが出る場合も WAF を無効（オフ）にしてみてください。

参考

https://www.blogging-life.com/how-to-resolve-403-error/ https://www.blogging-life.com/how-to-resolve-403-error/

MovableTypeでAMPページ用にiframeをamp-iframeに置き換えて書き出す

Tue, 09 May 2017 19:42:31 +0900

MovableTypeのブログをAMP対応にするため、AmpConvertというプラグインを入れています。You-Tube埋め込み用のiframeタグはamp-youtubeに変換してくれますが。それ以外のiframeタグはamp-frameにしてくれませんでした。

そこでテンプレート側で正規表現で置き換える方法で対応したのでメモ。

例えばGoogle Maps

例えばGoogleマップの地図をページを埋め込むためのタグが以下だったとします。

<iframe src="https://www.google.com/maps/embed?mid=0123456789" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

このを以下のようにしたいのです。

<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" src="https://www.google.com/maps/d/embed?mid=mid=0123456789" width="640" height="480"></amp-iframe>

AMP用テンプレートのソース

MovableTypeのAMP用に作ったテンプレートの本文の部分を以下のようにしました。

<mt:AmpConvert fix_img_size="1" base_url="https://qwerty.work">
    <$mt:Var name='regex[0]' value='/<iframe(.*?)<\/iframe>/g'$>
    <$mt:Var name='regex[1]' value='<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups"$1</amp-iframe>'$>
    <mt:For regex_replace="$regex">
        <mt:EntryBody>
        <mt:EntryMore>
    </mt:For>
</mt:AmpConvert>

以下が正規表現でiframeをamp-iframeに置換前と置換後を指定している部分です。

<$mt:Var name='regex[0]' value='/<iframe(.*?)<\/iframe>/g'$>
<$mt:Var name='regex[1]' value='<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups"$1</amp-iframe>'$>

Googleマップの場合、amp-iframeに置き換えるだけなく、**sandbox=“allow-scripts allow-same-origin allow-popups”**がないとAMPページで地図が表示されませんでした。

sandboxについては以下参考

MovableTypeのブログにAMP対応のテンプレートを作成してみた

Wed, 26 Apr 2017 21:06:27 +0900

MovableTypeでAMP対応のページを書き出せるようにAMP用の記事テンプレートを作ってみたのでメモ。

スマホでグーグル検索したときの検索結果の**⚡マークが付いているリンクを開くとページが高速で表示されるというAMP**（アンプ）。

https://www.ampproject.org/ https://www.ampproject.org/

AMP用の記事テンプレートを作成

AMPページでは

がいる
をまたはにする
imgタグをamp-imgにするなどamp-***しないといけないタグがある
CSSは内部に書かないといけない
AMP対応のJavaScriptしか使えない
AdSenseとAnalyticsもAMP対応のコード書き換えないといけない
etc…

と、いろいろ制約があるので、既存の記事テンプレートをいじるのではなく、AMP専用の記事テンプレートを作成することにしました。テンプレートを登録。

テンプレートのソース

<!DOCTYPE html><br><html amp lang="<$mt:BlogLanguage$>"><br><head><br><meta http-equiv="content-type" content="text/html; charset=UTF-8"><br><meta charset="<$mt:PublishCharset$>"><br><title><$mt:EntryTitle encode_html="1"$>-<$mt:BlogName encode_html="1"$></title><br><$mt:CanonicalLink regex_replace="//amp/","" $><br><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><br><script type="application/ld+json"><br>      {<br>        "@context": "http://schema.org",<br>        "@type": "Blog",<br>        "headline": "<$mt:EntryTitle encode_json='1'$>",<br>        "datePublished": "<$mt:EntryDate format_name='iso8601'$>",<br>        "dateModified": "<$MTDate format_name='iso8601'$>",<br>        "author": "<$mt:EntryAuthorLink show_hcard="1"$>",<br>        "publisher": "Qwerty.Work",<br>        "mainEntityOfPage": "<$mt:CanonicalURL with_index="1"$>",<br>        "image": ""<br>      }<br>    </script><br><style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><br><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript><br><script custom-element="amp-iframe" async src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script><br><script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script><br><script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script><br><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script><br><script async src="https://cdn.ampproject.org/v0.js"></script><br><style amp-custom><br>	body { margin:0; padding:10px; font-family:sans-serif; }<br>	amp-img { background-color: gray; border: 1px solid black; }<br></style><br></head><br><body><br><amp-analytics type="googleanalytics" id="analytics1"> <br>  <script type="application/json"><br>    {<br>  "vars": {<br>    "account": "UA-12345678-1"<br>      },<br>  "triggers": {<br>    "trackPageview": {<br>      "on": "visible",<br>      "request": "pageview"<br>        }<br>      }<br>    }<br>  </script> <br></amp-analytics><br><header><br>  <h1><mt:EntryTitle></h1><br>  <time><mt:EntryDate></time><br></header><br><amp-ad <br>    layout="responsive" <br>    width=300 <br>    height=250 <br>    type="adsense" <br>    data-ad-client="ca-pub-1234567891234567" <br>    data-ad-slot="1234567890"><br></amp-ad><br><article><br>  <mt:AmpConvert fix_img_size="1" base_url="https://qwerty.work"><br>    <mt:EntryBody><br>    <mt:EntryMore><br>  </mt:AmpConvert><br></article><br><aside>&nbsp;</aside><br><footer><hr><a href="<mt:BlogURL"><mt:BlogName></a></footer><br></body><br></html><br>

参考ページ

https://mbdb.jp/hacks/movable-type-coping-with-amp.html https://mbdb.jp/hacks/movable-type-coping-with-amp.html

https://www.brain-solution.net/blog/seo/amp-html/ https://www.brain-solution.net/blog/seo/amp-html/

https://mbdb.jp/hacks/movable-type-coping-with-amp.html https://mbdb.jp/hacks/movable-type-coping-with-amp.html

https://www.cherry-pick.jp/blog/movable-type/amp.php https://www.cherry-pick.jp/blog/movable-type/amp.php

アーカイブマッピングを設定する

AMP用のページはブログルートフォルダの/ampという階層に書き出すことにしたので、

amp/%y%/m%-f

としました。ファイル名.amp.htmlと書き出す手段もあったのですが、/ampに書き出すことにしました。

記事の横のチェックボックスにはチェックを入れないこと。このチェックボックスはデフォルトのアーカイブマッピングを指定するものなので、ここにチェックを入れると、PC用のページのリンクが全部/ampにあるページのURLになってしまいます。

プラグイン「AmpConvert」を入れる

このプラグインを入れるとimgやYouToube用のiflameタグをAMP用のタグに変換してくれます。以下からプラグインをダウンロードしてMTのpluginフォルダにAmpConvertフォルダを丸ごと置いてアップロードします。

https://github.com/ARK-Web/mt_plugin_AmpConvert https://github.com/ARK-Web/mt_plugin_AmpConvert

使い方

AMP用のコードに変換したいコードを**～**で囲みます。

<mt:AmpConvert>
	<mt:EntryBody>
	<mt:EntryMore>
</mt:AmpConvert>

これだけでimgをamp-imgに、YouTubeのiflameをamp-youtubeに変換してくれます。

AdSenseのコード

～に以下を追加

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

AMP用のAdSenseコード

サイト運営者 ID（data-ad-client）と広告ユニット ID（data-ad-slot）を自分の広告のコードに書き換えます。

<amp-ad
	width=300 <br>	height=250 <br>	type="adsense" <br>	data-ad-client="ca-pub-1234567891234567" <br>	data-ad-slot="1234567890"
</amp-ad>

詳しくは以下のAdSenseヘルプのページを参照してください。

https://support.google.com/adsense/answer/7183212?hl=ja https://support.google.com/adsense/answer/7183212?hl=ja

Analyticsのコード

～に以下を追加

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

AMP用のAnalyticsコード

UA-XXXXX-Yの部分を自分のAnalyticsのコードに書き換えます。

<amp-analytics type="googleanalytics" id="analytics1"><br><script type="application/json"><br>{<br>  "vars": {<br>    "account": "UA-XXXXX-Y"<br>  },<br>  "triggers": {<br>    "trackPageview": {<br>      "on": "visible",<br>      "request": "pageview"<br>    }<br>  }<br>}<br></script><br></amp-analytics>

詳しくは以下のページを参照してください。

https://developers.google.com/analytics/devguides/collection/amp-analytics/?hl=ja https://developers.google.com/analytics/devguides/collection/amp-analytics/?hl=ja

AMPページと通常ページの"canonical"

AMPページには通常ページのリンクを記載し、通常ページにはAMPページのリンクを記載します。通常のページは**/blogの階層で、AMPページは/blog/ampの階層**だった場合、以下のようになります。

AMPページ

<link rel="canonical" href="https://www.example.com/blog/document.html">

通常ページ（Non AMPページ）

<link rel="amphtml" href="https://www.example.com/blog/amp/document.html">

構造化データについて

うまく説明できませんが、JSON-LDとかいう構造化データというのがあったほうがいいようです。ブログ用のJSON-LDのサンプルは以下を参考にしてみてください。

http://jsonld.com/blog-post/ http://jsonld.com/blog-post/

ここでAMPページの構造化データのテストができます。

https://search.google.com/structured-data/testing-tool https://search.google.com/structured-data/testing-tool

AMP用ページのテスト

出来上がったAMP用のページがちゃんとできているか以下のAMPテストサイトで確認ができます。

Googleの検証サイト

https://search.google.com/search-console/amp https://search.google.com/search-console/amp

AMP用ページのURLを入れて[テストを実行]をボタンを押します。

ダメな場合はダメな箇所を教えてくれます。

AMP Projectの検証ツール

以下のURLで検証結果を表示できます。

https://validator.ampproject.org/#url=AMPページのurl

Search ConsoleのAMPレポートでエラーチェック

Accelerated Mobile Pages（AMP）レポートAMPページのインデックス状況やエラーや問題を確認できます。

https://www.google.com/webmasters/tools/accelerated-mobile-pages https://www.google.com/webmasters/tools/accelerated-mobile-pages

やることはもっとありますが、とりあえず以上でAMPページは導入できたので今回はこのくらいにしておきます。

テンプレート on qwerty.work

【Wordpress】TCDテーマ「GENESIS」関連メモ

TCDテンプレート用のCSSリファレンス

GENESIS用のタグとCSS

共通CSS

TCDテーマ「GENESIS」の公式ページ

デモサイト

製造業向けのWordpressテンプレートメモ

シングルページ・ランディングページ（LP）向け

Minimal Cafe

My Song

製造業向けテンプレート

New Standard

TCD065 NANO

Lightning

Business Press

Business Press

isotype

テンプレート販売サイト「WebStock」にあるテンプレート

TEKMOS

MI Partners

【EC-CUBE】関連商品プラグインで表示される商品一覧をカスタマイズしたいとき

関連商品のテンプレートTWIGファイルをカスタマイズしたい

テンプレートファイルの場所

商品詳細ページに表示される部分のテンプレート

管理画面用テンプレート

デフォルトのソース

カスタマイズに使った変数

デバッグしたいとき

デバッグモードに変更する方法と追記するコード

.envファイルの変更

テンプレートに追記するコード

参考ページ

作成したソース

商品詳細ページで使用するときの注意事項

form id=“form1"があるとうまく動かない

モーダルがうまく動かないとき

その他参考ページ

【EC-CUBE】この好みの場所に『カートに入れる』ボタンを設置したいとき

『カートに入れる』ボタンを自作したい

参考ページ

ここにあったソースをちょっと改造

カートに入れるために必要な情報

純正コードの控え

【EC-CUBE4】商品詳細ページをカスタマイズしたいときのメモ

テンプレートの場所

管理画面からテンプレートを編集

テンプレートの場所

【EC-CUBE4】商品画像の最大サイズを制限して自動的にリサイズしてアップロードしたいとき。

アップロード画像の最大サイズを固定したい

参考ページ

手順

変更を加えるテンプレート

追記するコード

MixhostでMovable Typeのテンプレート更新時に403エラーが出るときはWAFが原因かも

テンプレートの更新をすると403エラー

WAFを無効にしたら更新できた

WAFを無効（オフ）にする方法

解決できたけど、これでいいの？

WordPressで403エラーが出た場合も

参考

MovableTypeでAMPページ用にiframeをamp-iframeに置き換えて書き出す

例えばGoogle Maps

AMP用テンプレートのソース

sandboxについては以下参考

MovableTypeのブログにAMP対応のテンプレートを作成してみた

AMP用の記事テンプレートを作成

テンプレートのソース

アーカイブマッピングを設定する

プラグイン「AmpConvert」 を入れる

使い方

AdSenseのコード

～に以下を追加

AMP用のAdSenseコード

Analyticsのコード

～に以下を追加

AMP用のAnalyticsコード

AMPページと通常ページの"canonical"

AMPページ

通常ページ（Non AMPページ）

プラグイン「AmpConvert」を入れる