FileZillaでWordPressのテーマにAMPのphpを実装する手順【図解】

FileZillaでWordPressのテーマにAMPのphpを実装する手順【図解】

どうも、だいち(@spountant)です。

AMP for WordPress」プラグインを使って、AMPをいろいろ編集したいとき、使っているワードプレスのテーマごと変更したほうが早い。

一度手順通りに設定を行うことで、後々ラクにAMPの設定を変更できるようになる。

このページでは、FileZillaを使って使っているワードプレスのテーマにAMPのphpを実装する方法を紹介していく。

 

FilleZillaでFTPサーバーをいじり、ワードプレスのテーマにAMPを実装する

では早速FileZillaを使って、WordPressのテーマごといじる方法を図解する。

まずはFileZillaのサイトにアクセスし、最新のバージョンをダウンロードしよう。

 

FileZillaのダウンロードが完了したら、「ファイル」から「サイトマネージャー」を開く。

  1. 「新しいサイト」を開く
  2. サイト名は適当に名づける
  3. ホスト(H):の欄にサーバのホスト名を入力
  4. ユーザー(U):にドメインを入力
  5. パスワード(W):にFTPのパスワードを入力
  6. 「接続」をクリック

5.のFTPパスワードは、サーバを契約したときにメールで送られているか、サーバー情報を確認してみると見つかるはず。

wpXサーバーを使っている場合は「サーバー情報」にあるIPアドレスをコピペして、パスワード欄に入力すればいい。

ここからは「AMP for WordPress」プラグインをインストールしている前提で話を進めていく。

「wp-content」→「plugins」→「amp」の順に開いていく。

 

「templates」を右クリックしてダウンロードする。

 

「..」をクリックして2つ前の階層に戻る

 

「themes」をクリックし、自分の使っているWordPressの(子)テーマのファイルを開く。

 

そのテーマにダウンロードしておいた「templates」を右クリックしてアップロードする。

 

アップロードした「templates」の名前を「amp」に変更する。

 

この時点でWordPressの管理画面から「テーマの編集」を開くと、「amp」が追加されている。

 

AMPを最適化する

これでテーマの編集からAMPの設定を変えられるようになった。

  • 見出しのcssの変更
  • headerの背景色の変更
  • ampの デフォルトアイコン表示を変更
  • SNSシェアボタンの設置
  • 関連記事の表示

このようにいろいろできることはあるので、以下の記事を見つつ、自分の好きなようにいじってみよう。

関連記事:AMP表示におけるおすすめのデザイン変更・調整まとめ

 

URL :
TRACKBACK URL :

Warning: getimagesize(/home/spountant/wonderland02.com/public_html/wp-content/themes/dp-escena/img/json-ld/nologo.png): failed to open stream: No such file or directory in /home/spountant/wonderland02.com/public_html/wp-content/themes/dp-escena/functions.php on line 932