お知らせ バージョンアップ

AMP対応しました。- WordPressテーマ「AFFINGER4」

投稿日:

amp2

AMPがGoogleモバイルの通常検索結果にまで拡大したことを受けて通常の検索結果のAMPに対応した「AFFINGER4ver20161107」をUP致しました。

AMP(アクセラレイティッド・モバイル・ページ)はサイトの仕様を制限する事で表示を高速化するプロジェクトの名称です。

尚、まだβ版として入手は購入者会員サイトの「アップデートページ」のみのダウンロードとなっております。販売サイトでのテーマは旧バージョンのままなので今から購入される方もお手数ですが商品に同梱される会員サイトの案内をご確認頂き、登録後にアップデートページよりダウンロードして下さい(会員ページへの登録承認にはお時間を頂く場合がございます)

主な変更

  1. 通常のモバイル検索への投稿ページのAMP対応
  2. ブログカード風のショートコード実装
  3. 一覧に「カテゴリ表示」の設定追加

併せて、micata2proもAMP対応のβ版をアップデートページに公開しております。

AFFINGER4ver20161107について

投稿ページのAMP対応

2016-11-06_17h03_01

通常ページ

2016-11-06_17h02_53

AMP対応ページ

なんでもかんでもAMP化すれば良いというわけでもないのでテーマではサイト全体をAMP対応するのではなく、ページ毎にAMPとして出力するかどうかを選択できるように致しました。またテーマ管理にて一括で投稿ページをAMP対応にすることも出来ます。(※対応は投稿ページのみです

AMPのページからAMP対応されたページへのリンクはAMPページへ、そうではないページへのリンクは通常ページへリンクされますのでAMP対応ページ間でのスムーズな閲覧が可能になるかと思います。

2016-11-06_17h02_23

取りあえず一時的にSTINGER公式サイトも全ての投稿をAMP化してみたのですがモバイル検索の開発者プレビューで確認すると以下の様なAMPマークを検索結果にて確認できます(スマートフォンにて)

IMG_2765

IMG_2764

 AMPには仕組み上などの様々なルールがございます。
注意事項もございますので詳細を必ず以下にてご確認下さい。

AMPについての注意事項や使用方法

ブログカード風のショートコード実装

※以下はAFFINGER4のみとなります

自サイト内の記事を簡単にブログカード風に表示する事が出来ます。

例えばこんな風に

amp
AFFINGER4の「AMP」について

AFFINGER4はver20161106より「通常のモバイル検索結果」に表示されるAMPに向けて対応致しました。 DEMOAMPに対応したAFFINGER4のデモサイト 「AMP」はjavascri ...

続きを見る

WordPress自体にあるブログカードの仕組みとは異なります。任意の記事IDを指定するだけで表示が可能です。

設定方法

2016-11-06_17h45_21

記事IDを記入して選択(今回は記事IDが2の場合)
「ブログカード風」のクイックタグをクリック

2016-11-06_17h45_36 

③ショートコードが挿入され、完了です。

一覧に「カテゴリ表示」の設定追加

2016-11-06_17h22_58

記事一覧や関連記事の上にカテゴリを表示するかどうかの設定を追加しました。

2016-11-06_17h23_38

設定はテーマ管理にて可能です。
各カテゴリのID毎にクラスが生成されるので色を各カテゴリ別に変更する事が出来ます。

カテゴリカラーの変更

カテゴリIDはカテゴリの管理画面で任意のカテゴリにマウスを当てると下部に表示されます(画像では「3」)

2016-11-06_17h51_27

このIDの「.st-catid(ID)」として以下の様にCSSに記述します

.catname.st-catid3 { background:#任意のカラー; }

※上記は「3」の場合
※デフォルトのカテゴリ背景色はカスタマイザーで変更可能です。

一覧の抜粋の設定

2016-11-06_180232

従来では一覧に表示される抜粋は投稿の最初の文を表示していましたが、抜粋に記入がある場合はそちらを優先するように致しました。

2016-11-06_180155

クイックタグの追加

2016-11-06_17h59_09

2016-11-06_175849

下に余白をつくりたい時やアフィリエイトタグ管理プラグインのコードをスラッグで読み込むショートコードなど。

細かな修正

  • サイドバーの「NEWENTRY」をテーマ管理にて指定が無い場合は非表示に変更しました。
  • 投稿ページの「id="st-post"」が「class="st-post"」に変更になりました。
  • Twitterカードを大きいサムネイルのタイプに変更致しました。
  • その他

尚、購入者会員ページには変更に関する追加事項がUPされていますので御利用者はそちらもご覧下さい。

AMPについての注意事項や使用方法

各テーマの違い

現在、公開しているテーマの簡単な違いとなります。※20161107ver現在

  micata2 micata2pro STINGER8 AFFINGER4pro
料金 無料 3,500円 無料 6,500円
専用カスタマイザー機能 -
専用管理機能 -
YouTube背景機能 - -
広告ウィジェット - -
カテゴリ別ウィジェット - -
カテゴリページカスタマイズ - -
ランキング機能 - - -
AMP - -
DL DLサイト 販売ページ 準備中 販売ページ

※内容は変更になる場合がございます。

ad

ad

※記事の内容は動作や機能を100%保障するものではございません。悪しからずご了承下さいませ

御注意

当サイトの内容の一部はAFFINGER3以前のものであり、現AFFINGER4と異なる場合があります。

NEWS

amp2 1

AMPがGoogleモバイルの通常検索結果にまで拡大したことを受けて通常の検索結果のAMPに対応した「AFFINGER4ver20161107」をUP致しました。 AMP(アクセラレイティッド・モバイ ...

affinlion 2

新しく有料配布とさせていただいた「AFFINGER4」。 今までのサイト作成を通して必要な機能や便利な仕組みを思いつく限り詰め込んだ万能テーマに仕上がっています。 micataやSTINGER PLU ...

2016-09-28_163821 3

AFFINGER4はSTINGERとmicataの両方を兼ね備えた、STINGER系の中でもっとも最新かつ最高位のテンプレートです。 試験的にAFFINGER4の管理画面の中をのぞいて頂ける管理画面用 ...

-お知らせ, バージョンアップ

Copyright© アフィリエイトのAFFINGER , 2016 AllRights Reserved Powered by AFFINGER4.