2018年5月7日こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。【2017年4月追記】AFFINGER4ver20170410アップデートで、通常ページへ戻るリンクボタンが標準仕様となり、当ブログでもそちらを利用しています。リンクボタンの上にメッセージを追加したい場合などに当ページを参考にしていただければ幸いです。公式サイト【機能追加】AFFINGER4ver20170410アップデートのお知らせWordPressテーマ「AFFINGER4」のAMPページに通常ページへの移動リンクを追加する方法をご紹介します。下記のように必要な場合にのみ簡単に通常ページにアクセスすることができるように、説明文つきの通常リンクを表示するようにしました。見本ページhttps://kanamii.jp/1514/amp/AMP機能自体が新しいものなので、その使い勝手やページのカスタマイズも試行錯誤。ブログ記事に訪れて下さった方が何を求めているか。そのニーズは様々だと思っています。高速表示が可能なAMPページは「探している答え」を提供する手段としては有効だと感じていますが、例えば...関連する記事をもっと読んでみたい→カテゴリ一覧やサイトマップ数か月前はどんな感じだったのかな?(経過報告記事など)→アーカイブページこんな記事もありそうor以前に見たページを探したい→検索フォーム更新情報を受け取りたい→購読ボタンやフォローボタン質問メールを送りたい→お問い合わせページ通常モバイルページのデザインを見たい(これは例外かな?)このように感じてくださった場合などですね。AFFINGER4の標準機能で、フッターやウィジェットで対応できる部分も多々ありますが、簡易的なAMPページよりもサイト全体を見渡せる通常ページの方が都合のよい場合もあるかもしれません。そんなときに、簡単に通常ページにアクセスできるリンクがあったら便利かな?と。実は、Google検索からのAMPページの標準機能でも通常ページへのアクセスは可能なんですね。画面を上から下へスワイプすると、このようにアイコンが表示されます。これ...なんだかわかりにくいですよね。それだけ利用される頻度が低いということなのかな?当ブログでAMP化しているページ数はまだ少なく、今回のカスタマイズはテスト的な要素を含みますが、自身の備忘録の意味も含めてカスタマイズ方法を記録します。よろしかったら参考になさってくださいね。今回のカスタマイズは「single-amp.php」と「st-amp-css.php」(メッセージのみ追加の場合は不要)を編集します。AFFINGER4のアップデート時にカスタマイズ内容が消えてしまわないように、ご自身のパソコンにある親テーマ内の2つの該当ファイルをFTPでお使いの子テーマ内にアップロードして子テーマを作成してください。他のカスタマイズで既に作成済みの場合は、新たに作成する必要はありません。前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。トラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。...今後のアップデートでAMPに関わる部分の変更(親テーマのコードの変更)があった場合は、再度子テーマの作成とカスタマイズが必要になります。single-amp.phpを編集WordPressダッシュボード→外観→テーマ→テーマの編集→「single-amp.php」(子テーマ)を開きます。パソコンの「Ctrlキー」+「F」で表示される検索欄に「更新がない場合」と入力してマークされる部分の下記コードを探してくださいね。?></span></p>上記コード内の下から2行目、</span></p>のすぐ上に下記コードを追加してください。※メッセージはお好みで変更可能です。<p><br>現在ご覧いただいているページは高速表示用の簡易版ページです。</p>1<p><br>現在ご覧いただいているページは高速表示用の簡易版ページです。</p>追加後のコードです。<p><br>現在ご覧いただいているページは高速表示用の簡易版ページです。?><p><br>現在ご覧いただいているページは高速表示用の簡易版ページです。</p></span></p>続いて、上記コードのすぐ下に下記コードを追加してください。※AFFINGER標準のボタンを表示する場合は必要ありません。Awesomeの紙飛行機のアイコンフォントのコードです。こちらのアイコンフォントとテキスト部分は自由に変更可能です。permalink」については、下記ページを参考にしました。日本語版その後、通常ページへのURLを呼び出す方法がわからず悩み続けること2日間...(笑)最終的には、AFFINGER4のfunctions-amp.phpで指定されている「ampページが存在する場合はそちらを優先的に取得するフィルターフック」の存在に気がつきました。PHPの基礎知識がないと何をやるにも遠回りです。参考サイトは下記ページです。本当にお世話になりました。ありがとうございます。参考WordPressをカスタマイズするなら覚えておきたいアクションフックとフィルターフック/Webデザインレシピ参考WordPressカスタマイズの幅が劇的に広がる、フィルターフックとアクションフックの使い方/株式会社LIGご紹介しているコードは、「フィルターフック削除のコード」→「表示中のページURLを取得するコード」→「フィルターフックを再設定するコード」になります。st-amp-css.phpにコードを追加WordPressダッシュボード→外観→テーマ→テーマの編集→「st-amp-css.php」(子テーマ)を開きます。最下部に下記コード(通常ページへのリンクの文字サイズ指定)を追加してカスタマイズ完了です。{font-size:12px;}追加したコードが反映されない場合は、キャッシュをクリアして再度ご確認ください。パソコンでのAMPページの表示確認方法を含めた、AFFINGER4のAMP化方法の全手順は下記ページで説明しています。5,390view【AFFINGER4】AMP化方法の全手順をまとめましたWordPressテーマ「AFFINGER4」は、テーマ標準でAMP対応機能が準備されています。...以上、AFFINGER4のAMPページに通常ページへの移動リンクを追加する方法をご紹介しました。最後までお付き合いくださりありがとうございます。関連記事1,748view【AFFINGER4】AMPページも自分色♪カスタマイズまとめ当ページでご紹介しているカスタマイズは、AFFINGER5「WING」でも応用できます。meKanami(かなみ)40代、4児の母、認知症の義母と同居中です。何気ない日常に幸せを感じるマイペースなヒト。子育てと介護の傍ら「自分にできることってなんだろう?」を模索しながらブログを書いています。...1,989view【AMPページ】Googleの検索結果に表示されないときのチェックポイントと注意点WordPressテーマを「AFFINGER4」に変更して、一部のページをAMP対応しました。AMPテストも問題なし。PLUSからAFFINGER4に変更する際に、デザインをほぼ同じ状態にカスタマイズしてから公開しました。...2,297viewWordPressサイトにPush7を導入する方法と設定手順を簡単4ステップで♪Webプッシュ通知サービス「Push7」は、更新情報を購読者のブラウザに自動的に送ることができる便利なサービス。実は私もつい最近知ったばかりです。PLUS】アドセンスをアイキャッチ画像の下・見出し(h2)の前に設置する方法STINGER8・AFFINGER4(AMPページへの対応を含む)でのカスタマイズ方法を追加しました。Buzz】のカスタマ...AFFINGER4でのカスタマイズ方法を追加しました。AFFINGER4の記事下広告の位置変更方法を修正しました。専用子テーマ【JET】記事タイトルの文字数変更などのカスタマイズ前記事では、WordPressテーマ「AFFINGER4」の専用子テーマ「JET」の導入手順、カスタマイズの引継ぎ方法、注意事項などをご紹介しました。PLUS】3カラムのフッターを追加する方法(背景色指定or背景画像使用)AFFINGER4でのカスタマイズ方法を追加しました。コードの追加場所を「子テーマ」のfunctions.phpに変更しました。当ブログの記事下に設置している関連記事表示は、「Milliard関連ページプラグイン」を利用しています。パソコンはスクロールありのパネル表示で。モバイルではスクロールなしのパネル表示にしています。PLUS」「STINGER8」「AFFINGER4」のカスタマイズ情報です。現在見ていただいている当ブログで行っている全てのカスタマイズ方法を記録しています。※AFFINGER5「WING」のカスタマイズにつきましては、現在確認作業とまとめ記事の作成中です。備忘録(WordPress)ウィジェットに追加したアドセンスが保存できない・余白ができる場合の対処法WordPressのウィジェットエリアにアドセンスコードを追加する場合、つい最近までは「カスタムHTML」を利用するのが一般的でしたが、WordPress4.9よりHTMLのエラーチェック機能が新たに加わったことで、エラーにより保存できない状態になることがあるようです。上記のように「!」の警告が表示されていても保存できる場合は問題ありませんが、保存ボタンをクリックしても保存されない場合は「カスタムHTML」ではなく「テキスト」にアドセンスコードを貼りかえることで対処することができます。備忘録(WordPress)カエレバ・ヨメレバを女性向けのかわいいデザインにCSSカスタマイズ記事内でおすすめの商品や書籍を紹介するときには、Amazonや楽天、Yahooショッピングなど、複数の商品リンクをひとまとめにすることができるブログパーツ「カエレバ・ヨメレバ」がとても便利。カエレバは商品の紹介用、ヨメレバは書籍の紹介用に使い分けることができます。利用されている方も多いですよね。当ブログでも導入を検討中に、お世話になっている方からタイムリーなご質問を受けたことをきっかけに、CSSカスタマイズに挑戦してみることにしました。N」ver20180117を追加しました。style.css及びst-amp-css.php内の画像パスに拡張子(.png)の記載もれがあり、コードの修正を行いました。...ReadMoreSTINGER・AFFINGERカスタマイズ【AFFINGER4】関連コンテンツを通常ページとAMPページに設置する方法こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。WordPressテーマ「AFFINGER4」の通常ページとAMPページにアドセンスの関連コンテンツユニットを設置する方法をご紹介します。最近になって、新たに「インフィード広告」や「記事内広告」などのネイティブ広告が追加されたことで、どこにどんな風に広告を置けばいいんだろう?と戸惑っている方も多いのではないでしょうか。ページ以外のアイキャッチ画像(トップページ含む)」にて設定可能になりました。先日Twitterでトップページをシェアしていただいたことをきっかけに、トップページのみ「Twitterカードの画像が表示されない」ことに気がつきました。下記は、TwitterとFacebookのOGPチェックツールでの検証結果です。数年前、右も左もわからず挑戦したWordPressでのサイト作成。当時はWeb上の沢山の情報に助けられました。初心に戻り、WordPressにゼロから挑戦したい方を応援!難しい説明や専門用語は極力省いて、初心者さん目線でレクチャーします。ゼロからのWordPress入門【21】プラグインの設定方法について加筆修正を行いました。前回までは、更新情報の受け取りツールとして、サイト名で登録することができる「Facebookページ」の作成方法とページプラグイン設置方法、さらに、Twitterのフォローボタンと埋め込みタイムラインの設置方法をお伝えしました。WordPress.comを利用して、FacebookページとTwitterへ更新情報を自動投稿する方法をいくつかの注意点などを含めてお伝えしていきます。前ページでは、ユーザーさん向けの更新情報受け取りのツールとして、サイト名で作成することができる「Facebookページ」の作成方法とページプラグインの導入方法をご紹介しました。今回は、サイドバーやフッターへのTwitter埋め込みタイムラインウィジェットとフォローボタンの設置方法、さらに埋め込みタイムラインの背景を透明にする方法を説明していきます。・・実は埋め込みタイムラインの設置方法については、以前にも記事内で一度お伝えしているのですが、その後変更があったようです。前ページでは、WordPressのカスタマイズと子テーマについてご紹介しました。次のステップは、ブログの『更新情報発信』についてのお話しです。無料ブログサービスのように、コミュニティ間での「読者登録」のツールがないWordPressでのサイト運営では、更新情報の受け取りに必要なツールは自身で設定する必要があります。前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。トラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。WordPressでは、自分の好みに合わせてテーマファイルを自由にカスマイズすることが可能となっています。このカスタマイズ時に便利なのが「子テーマ」です。ここでは、実際に「FFFTP」を利用したファイルのバックアップとWordPressプラグイン「WP-DBManager」を利用したデータベースの自動バックアップ方法を順を追って詳しく説明していきます。バックアップ作業はいくつものステップがあって大変ですが、2回目以降は面倒な設定がないのでとても楽チンです。子育て心は一緒に♪娘へのプレゼントはお揃いのくまのお守りに決めましたクリスマスまであと1か月を切りましたね。お子さんをお持ちの方はプレゼント選びや準備にワクワクの季節。それも含めてクリスマスは親子の一生の思い出に残る楽しいイベントだと思っている私です。我が家では毎年、4人の子供たちが小さな頃からサンタさんからのプレゼントの他に、母企画の「家族Deビンゴ大会」というイベントをクリスマスイブに開催しています。一人ひとりが驚くような。嬉しいサプライズプレゼントはなんだろう?と心を弾ませるこの季節。AdSenseフォローアップセミナー(札幌)に参加してきました。当日は受付を担当させていただいたものです。参加者の方々には謎の人物だったかもしれませんね。んくらさん(@matari39)とは8年前、無料ブログサービスで子育てブログを書いていた頃に出会い、私にとっては、恩師でもあり...そうですね。友人というよりも、先生というよりも「お兄さん」という位置づけがぴったりの。備忘録(WordPress)カエレバ・ヨメレバを女性向けのかわいいデザインにCSSカスタマイズ記事内でおすすめの商品や書籍を紹介するときには、Amazonや楽天、Yahooショッピングなど、複数の商品リンクをひとまとめにすることができるブログパーツ「カエレバ・ヨメレバ」がとても便利。カエレバは商品の紹介用、ヨメレバは書籍の紹介用に使い分けることができます。利用されている方も多いですよね。当ブログでも導入を検討中に、お世話になっている方からタイムリーなご質問を受けたことをきっかけに、CSSカスタマイズに挑戦してみることにしました。今までブログやSNSでのプロフィール画像は、フリー素材でお借りしたものを使っていましたが、2018年のスタートと合わせて似顔絵アイコンに変更しました。周囲にはご自身で綺麗に絵が描ける方もいらっしゃって、常々「すごいなぁ。そんなことができたら素敵だな。」と思っているのですが、なんせ人一倍絵心がなくてですね。