tamakipedia

フロントエンドエンジニア。Typescriptもう特訓中です。一日の振り返りや学んだことをちょっとずつ吐いています。

【amp】amp研究日記② 〜wordpressコーディングの全体の流れ〜

amp対応日記二日目
今日はamp用のテンプレートを実際に作成していきます。

前回の記事はこちらです。
okinawanpizza.hatenablog.com

今回も独断と偏見がすごいです。(笑)

ampページのurlを作成

今回、テンプレートを切り分ける方法として記事のurlに「amp=1」
と言うパラメーターがある場合のみ AMP化しようと思います。

https://tamakipedia/kijione?amp=1

こんな感じになります。

AMPの存在を知らせるLinkタグを追加する

まず、amp対応ページの在処を示す必要があります。
なので正規の記事ページに以下のリンクがある状態にします。

<link rel="amphtml" href="(記事のurl)?amp=1">

したがってfunctions.phpに以下の記述をします。

add_action('wp_head', 'amp_link_tag');
function amp_link_tag(){
    if(is_singular('post')){
        echo '<link rel="amphtml" href="'.esc_url(get_permalink()).'?amp=1">'."\n";
    }
}

add_actionというのが、アクションフックと呼ばれるらしく
この場合wp_headが呼ばれるタイミングで関数を呼び出すことができます。

AMP専用のテンプレートに切り替える

AMPタグを追加したら、次は amp=1が追加されたらamp専用のテンプレートに切り替えれるように
functions.php に記述を追加します。

function is_amp(){
  //AMPチェック
  $is_amp = false;
  if ( empty($_GET['amp']) ) {
    return false;
  }

  //ampのパラメーターが1かつ投稿ページの
  //かつsingleページのみ$is_ampをtrueにする
  if(is_single() &&
     $_GET['amp'] === '1'
    ){
    $is_amp = true;
  }
  return $is_amp;
}

そして記事の表示部分は

//single.php
<?php if(is_amp()) : ?>
  <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : ?>
      <?php the_post(); ?>
      <?php get_template_part('/amp/single-amp'); ?>
    <?php endwhile; ?>
  <?php endif; ?>
<?php else : ?>
  <?php get_template_part('/amp/single-page'); ?>
<?php endif; ?>

このような形で single-amp.php と single-page.php を出しわけするように記述しました。
(single.phpそのものを読み込まずに、amp用のテンプレートを呼び出す方法もあるらしいです!!)

single-page.php テンプレートの作成

ここまでで、「(通常の記事url + ?amp=1)」で
googleがampページとしてクロールしてくれるようになり、
かつ、single-amp.php というアンプ専用のテンプレートを呼び出してくれることになりました。

次は single-page.phpの中身です。

テンプレートは以下の二点によって処理方法が違ってきます。
①静的な部分(ヘッダー、フッターなどの変わらない部分)
②動的な部分(記事の内容など、ページごとに変わってくる部分)

静的部分

ampのドキュメントを見る感じ静的部分の方がテストしやすそうなので
こちらから進めていきました。
これに関してはamp html 用のテンプレートが記載されているので
メディアのヘッダー部分をこちらのテンプレートに当てはめて実装していきました。

・テンプレート
(って絵文字が使われててめっちゃかっこいいですよね笑)

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <title>Sample document</title>
    <link rel="canonical" href="./regular-html-version.html">
    <meta name="viewport" content="width=device-width">
    <style amp-custom>
      h1 {color: red}
    </style>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "thumbnail1.jpg"
      ],
      "datePublished": "2015-02-05T08:00:00+08:00"
    }
    </script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
    <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><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Sample document</h1>
    <p>
      Some text
      <amp-img src=sample.jpg width=300 height=300></amp-img>
    </p>
    <amp-ad width=300 height=250
        type="a9"
        data-aax_size="300x250"
        data-aax_pubname="test123"
        data-aax_src="302">
    </amp-ad>
  </body>
</html>

AMP HTML 仕様 - amp.dev

ちょこちょこ細かいルールはありますが、
今回は割愛させていただきます。

動的な部分

こちらはコンテンツの数だけ対応していかなきゃいけないので難しい印象があります。
こちらに関しては functions.php の中に記述して、
コンテンツの中のampで使えないタグをfunctions.php でamp用のタグに加工する必要があります。
こちらは何度もテスト確認する必要ありです、、、
現在進行形ですごく時間がかかっているところになります。

add_filter('single_template', 'change_amp_template');
function change_amp_template($single_template){
    $change_template = $single_template;
    $post = get_queried_object();
    $string = $post->post_content;
    if(isset($_GET['amp']) && $_GET['amp'] == 1){
        //本文内の要素をAMP用に置換したり、不要なものは削除する
        add_filter( 'the_content', 'the_content_filter', 12 );
        function the_content_filter( $content ) {

            //ここからampで使えないタグをphp側からどんどん書き換えていく処理を追記していきます

single_templateフィルターフックというのがあり、
いわば記事の詳細テンプレートが読み込まれる際に処理をさせるそうです。

    if(isset($_GET['amp']) && $_GET['amp'] == 1){

urlを読みに行って、もし 「amp」パラメーターが「1」だったら
次の処理をする、というようなコード。

        add_filter( 'the_content', 'the_content_filter', 12 );

the_content()は管理画面に入力した記事内容を出力するテンプレートタグで、
こちらのコードはthe_content()が呼び出される際に「the_content_filter」という処理を実行します。。という処理です。

【amp】amp研究日記① 〜AMPとは〜

今日から仕事での開発の話もブログにしていこうと思います。

今回三つのAMP対応を任せてもらえることになりました!

かくいう私は一回もamp対応したことがなく、、
せっかくなので、ログを残していこうと思います。

AMP日記二日目
okinawanpizza.hatenablog.com

全てのamp対応を終えるまで日記をつけていき、
最後にまとめの記事を書けたらなと思います。

今回、二つのwebサービスのamp化を行います。
使用言語はそれぞれ以下の通りです。
wordpress
ruby + react.js

最初はwordpressのamp開発から始めていくことに。

AMPとは

Googleが推進しているモバイルページを高速に表示させるための手法によって作成されているコンテンツ」

・Accelerated Mobile Page
・2015年10月にスタート
GoogleTwitterの共同開発

なぜAMPページが高速に表示されるのか

ざっくり言うと以下の二点が関係します。

・読み込みの負荷を減らすルールを策定していること    
・本来のページがあるウェブサイトへのアクセスが発生しない

と言うのもAMPページは大きく三つの要素から構成されています。
AMPページの仕様はかなりガチガチで「読み込みに時間がかかることは最初からさせない」
という方針で策定されています。つまり軽量なコードにするために厳しいルールがあります。

AMP HTML(<html amp lang="ja">にはじまる少し特殊なHTML5)  
AMP JS(できるだけ非同期処理に限定したJavascript)   
AMP Cache(キャッシュされたAMP HTML ページが配信される)  
AMP cache

・AMPページを見つけ、googleが提供するCDN(コンテンツ配信システム)という場所に保存してくれる

おしまい!!

今日はampの基本的なおさらいをしていきました。
今日までに色々情報収集しているのですが、
やはり5年前に人気があっただけあって出回ってる記事が少なかったり
情報が古かったりする印象をうけました。

ampのドキュメントにあったように stack overflow などで
質問することも取り入れて新しい知識を身につけつつ進めていこうと思います。

明日

・ampタグの紹介
・wordpreesでのampコンテンツ表示
・記事内のHTMLタグをfunctions.phpで置換していく
・テスト方法

新知識

・サーバーキャッシュとブラウザキャッシュの違いについて (ちなみにAMP cache はサーバーキャッシュ)
https://digitalidentity.co.jp/blog/seo/seo-tech/cash-speed-up.html

参考

顧客のサイトをAMP化するための8つのヒント
https://webmaster-ja.googleblog.com/2016/09/8-tips-to-amplify-your-clients.html

ドキュメント 「AMP HTML ページの作成」
https://amp.dev/ja/documentation/guides-and-tutorials/start/create/basic_markup/?referrer=ampproject.org

AMPページのキャッシュの仕組み
https://amp.dev/ja/documentation/guides-and-tutorials/learn/amp-caches-and-cors/how_amp_pages_are_cached/?referrer=ampproject.org

MAMPを使ってローカルを立ち上げる
okinawanpizza.hatenablog.com

【css】テキストの高さ中央揃え

テキストの高さ中央揃え

テキストの高さがそれぞれ違う場合はflexboxを使えばOK
align-itemsで高さを中央に揃えることが可能です。意外と便利!

html

<div class="demo">hello tamakipedia</div>

css

.demo {
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
}

【wordpress】jsファイル jQueryファイルを読み込む方法

js ファイルや jQuery ファイルの読み込みはLInkタグではなく
functions.php に記述します。

function load_scripts {
 
 //jQの場合
  wp_deregister_script('jquery'); //WPが持つjQueryを利用しない
  wp_enqueue_script(
    'jquery',//読み込むJSを識別する名前(必須)
    '//code.jquery.com/jquery-3.4.1.min.js'
  );
 
  //JS
  wp_enqueue_script(
    'script',//読み込むJSを識別する名前(必須)
    get_stylesheet_directory_uri() . '/js/script.js',//JSファイルのパス
    array('jquery'),//事前に読み込むJS識別名
    '1.0',//バージョン番号: 例)JSファイルパスの後にバージョン番号のクエリ文字列を追加する
    true//出力位置: true </body>直前に出力, false <head>内に出力
  );
 
  //フロントページ用JS
  if (is_front_page()) {
    wp_enqueue_script(
      'front-page',
      get_stylesheet_directory_uri() . '/js/front-page.js',
      array('jquery'),
      '1.0',
      true
    );
  }
}
add_action('wp_enqueue_scripts', 'load_scripts');

【wordpress】コメント表示の際に出力されるHTMLを変更する

前回コメント欄の表示方法の出力方法について記事を更新しました。

okinawanpizza.hatenablog.com

今回はコメント欄に表示されるHTMLを変更していこうと思います。
というのも私自身、既存のテーマ「twentytwentyone」を上書きしなからテーマを作っていました。

フォームのHTMLだけがどこにも見当たらず、、、
調べてみるとthemeディレクトリ配下ではなく
wp_includesディレクトリ内に記述がありました;;

今回はその変更方法をまとめてみました!!

手順

① コメントに使われているHTMLの設定部分を確認

おそらくtwenty-nineteenテーマの場合は
wp_includesにあるclass-walker-comment.phpに記述されているかと思います。

以下の部分が設定箇所となり、
こちらを書き換えることで変更可能です。

 protected function html5_comment( $comment, $depth, $args ) {
        $tag = ( 'div' === $args['style'] ) ? 'div' : 'li';

        $commenter          = wp_get_current_commenter();
        $show_pending_links = ! empty( $commenter['comment_author'] );

        if ( $commenter['comment_author_email'] ) {
            $moderation_note = __( 'Your comment is awaiting moderation.' );
        } else {
            $moderation_note = __( 'Your comment is awaiting moderation. This is a preview; your comment will be visible after it has been approved.' );
        }
        ?>
        <<?php echo $tag; ?> id="comment-<?php comment_ID(); ?>" <?php comment_class( $this->has_children ? 'parent' : '', $comment ); ?>>
            <article id="div-comment-<?php comment_ID(); ?>" class="comment-body">
                <footer class="comment-meta">
                    <div class="comment-author vcard">
                        <?php
                        if ( 0 != $args['avatar_size'] ) {
                            echo get_avatar( $comment, $args['avatar_size'] );
                        }
                        ?>
                        <?php
                        $comment_author = get_comment_author_link( $comment );

                        if ( '0' == $comment->comment_approved && ! $show_pending_links ) {
                            $comment_author = get_comment_author( $comment );
                        }

                        printf(
                            /* translators: %s: Comment author link. */
                            __( '%s <span class="says">says:</span>' ),
                            sprintf( '<b class="fn">%s</b>', $comment_author )
                        );
                        ?>
                    </div><!-- .comment-author -->

                    <div class="comment-metadata">
                        <?php
                        printf(
                            '<a href="%s"><time datetime="%s">%s</time></a>',
                            esc_url( get_comment_link( $comment, $args ) ),
                            get_comment_time( 'c' ),
                            sprintf(
                                /* translators: 1: Comment date, 2: Comment time. */
                                __( '%1$s at %2$s' ),
                                get_comment_date( '', $comment ),
                                get_comment_time()
                            )
                        );

                        edit_comment_link( __( 'Edit' ), ' <span class="edit-link">', '</span>' );
                        ?>
                    </div><!-- .comment-metadata -->

                    <?php if ( '0' == $comment->comment_approved ) : ?>
                    <em class="comment-awaiting-moderation"><?php echo $moderation_note; ?></em>
                    <?php endif; ?>
                </footer><!-- .comment-meta -->

                <div class="comment-content">
                    <?php comment_text(); ?>
                </div><!-- .comment-content -->

                <?php
                if ( '1' == $comment->comment_approved || $show_pending_links ) {
                    comment_reply_link(
                        array_merge(
                            $args,
                            array(
                                'add_below' => 'div-comment',
                                'depth'     => $depth,
                                'max_depth' => $args['max_depth'],
                                'before'    => '<div class="reply">',
                                'after'     => '</div>',
                            )
                        )
                    );
                }
                ?>
            </article><!-- .comment-body -->
        <?php
    }

② functions.php にオーバーライドする

先程の箇所を直接変更するのではなく、
functions.phpに継承します。

<?php
class My_Walker_Comment extends Walker_Comment {
    function html5_comment( $comment, $depth, $args ) {

                //ここに先程の`html5_comment()`の中身を移し替えます
        <?php
    }
}
?>

③ My_Walker_Commentを呼び出す設定をする

テンプレートタグwp_list_comments($args)の設定に変更を加えます。

<?php 
$args = array(
    'walker' => new My_Walker_Comment,
);
wp_list_comments( $args ); 
?>

これで継承したMy_Walker_Commentを呼び出すように設定されておりますので
関数内のHTMLを任意に書き換えることが可能となります!!

おしまい!!

参考
wp_includesディレクトリリファレンス
https://wpm.eomec.com/link-template

説明がわかりやすかったです!
https://blog-and-destroy.com/21654

【wordpress】コメント欄のカスタマイズ方法

おはようございます!

今日はコメント欄のカスタマイズ方法についてご紹介していこうと思います。

コメント欄のカスタマイズに関してもう少し踏み込んでみました。
okinawanpizza.hatenablog.com

comments.php でできること

・ページネーション「前のコメント」「次のコメント」実装
・コメント一覧を表示
・コメントを入力するためのフォーム作成

他にもいろいろありますが、メインはこの3つです。

手順

①コメントのループ処理

wordpressの記事のループを表示するようにコメントもhave_comments() で表示します。

<?php if ( have_comments() ) : ?>
//処理
<?php endif; ?>

②全コメントの掲載

任意に応じて以下の関数を使い分けます。

//全てのコメントを掲載するタグ
<?php wp_list_comments(); ?>

//コメントナビゲーション
<?php the_comments_navigation(); ?>

//コメントフォーム
<?php comment_form(); ?>

コメントタグの配列でいろいろ設定可能

<?php $args = array(
    'walker'            => null,
    'max_depth'         => '',
    'style'             => 'ul',
    'callback'          => null,
    'end-callback'      => null,
    'type'              => 'all',
    'reply_text'        => 'Reply',
    'page'              => '',
    'per_page'          => '',
    'avatar_size'       => 32,
    'reverse_top_level' => null,
    'reverse_children'  => '',
    'format'            => 'html5', // テーマが 'HTML5' をサポートしないなら 'xhtml'
    'short_ping'        => false,   // バージョン3.6以降
    'echo'              => true     // 真偽値、デフォルトが true
); ?>
タグ 設定
walker カスタムWalkerクラスを設定
max_depth コメントの階層の深さ
style div、ol、ul。外部のタグは明示的に記載する
callback 各コメントの開始タグや内容を表示するカスタム関数を設定
end-callback 各コメントの終了タグを出力するカスタム関数を設定
type 表示するコメントの種類を設定
reply_text 各コメントの返信用リンクの文字列
page ページ分けした場合に表示対象とするページ
per_page 1ページに表示するコメントの数
avatar_size 表示するアバターの大きさをピクセルで指定
gravatarの場合は1〜512までサポート
reverse_top_level trueにすると最新のコメントを先頭に設定できる
reverse_chidren trueにすると一番新しい子コメントが付いたコメントを先頭に設定できる
format html5またはxhtmlを指定できる
current_theme_support( 'html5' )で設定している値がデフォルトになる
short_ping short pingを使うかどうか設定
echo コメントのリストを表示するか、値として返すか設定

③管理画面からコメント設定を変更する

コメントが表示できたらワードプレスの管理画面から
表示を変更していきます。

f:id:okinawanpizza:20210506063333p:plain

場所は
「設定」>「ディスカッション設定」から変更できます。
コメントの表示順序の設定などもこちらから変更していきます。

こちらを呼びだした際にデフォルトの表示で、
決まったHTMLが呼び出されます。
こちらの変更に関しては次回説明しようと思います。

おしまい!!

参考 コメントテンプレートタグwp_list_comments()
//https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_list_comments

コメントフォームが表示されない
https://webcreator.webmeo.org/blog/949/

【wordpress】コメント欄の基本的な作り方

ゴールデンウィークはいかがお過ごしでしたか?
ひょんなことからブログの作成をお願いされたので
勉強がてら作成しました。

コメント関連は実装したことがなかったので、一度整理してみようと思います。

comments.php を呼び出す

デフォルトのテーマでも comments.php にコメントのループが記載されている。

<?php comments_template( $file, $separate_comments ); ?>

こちらのテンプレートタグを利用して呼び出すことが可能です。

デフォルトの comments.php を利用したくない場合は

① comment-example.php などのファイルを記述してそこでカスタマイズしていきましょう。
② そのあとは先程のテンプレートタグに読み込み先を指定してあげましょう。

comments_template('/comment-example.php ');

こちらにより詳しくコメント欄のカスタマイズ方法について記述しました。

okinawanpizza.hatenablog.com

okinawanpizza.hatenablog.com