【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>
ちょこちょこ細かいルールはありますが、
今回は割愛させていただきます。
動的な部分
こちらはコンテンツの数だけ対応していかなきゃいけないので難しい印象があります。
こちらに関しては 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月にスタート
・GoogleとTwitterの共同開発
なぜ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>
.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を変更する
前回コメント欄の表示方法の出力方法について記事を更新しました。
今回はコメント欄に表示される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 | コメントのリストを表示するか、値として返すか設定 |
③管理画面からコメント設定を変更する
コメントが表示できたらワードプレスの管理画面から
表示を変更していきます。
場所は
「設定」>「ディスカッション設定」から変更できます。
コメントの表示順序の設定などもこちらから変更していきます。
こちらを呼びだした際にデフォルトの表示で、
決まった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 ');
こちらにより詳しくコメント欄のカスタマイズ方法について記述しました。