WordPress カスタマイズ -1

1_PHP(テンプレート)のおもな構成について

index.php サイト全体・この中に下記のテンプレートを呼び込む
  header.php ヘッダー
  content.php 固定・投稿・サイド
    main.php 固定・投稿
      page.php 固定ページ(テーマによってTOP専用のHome Page や Full Width など複数ありることも)
      single.php 単一記事の投稿
    sidebar.php サイド(ウィジェットで必要なものを構成・左右選択もしくは設定)
footer.php フッター・・・キャッシュや開設日(Since_2015...)を追加する
※最近のテーマはレスポンシブが基本(PC・タブレット・スマホでレイアウトが変わる)
archive.php カテゴリーや月別アーカイブ一覧など
404.php エラーの時に表示されるテンプレート
comments.php コメントテンプレート(フィッシング防止のため使わない)

2_ 外観 テーマ選択とPHPファイルから削除するもの

イメージに近いテーマを選択。(レスポンシブ・CSS ファイルがカスタマイズしやすいものを)
使うテーマが決めたら、カスタマイズ前にテーマのPHPファイルをダウンロードしておくと、誤った場合に戻せる

レクチャーで使うテーマ
Coral Drive・WPspirit-01・prestro・BirdSITE・Dyad・Seasonal・・・

固定ページ(page.PHP・・・複数ある場合も)と単一記事の投稿(single.PHP)ファイルから、コメント欄ソースを削除。
   <?php
   // If comments are open or we have at least one comment, load up the comment template
   if ( comments_open() || '0' != get_comments_number() ) :
   comments_template();
   endif;
   ?>

1行の場合も有り・・・    <?php comments_template( '', true ); ?>

複合のコメントソースの場合は、下記のソースだけ削除
   <if ( comments_open() || get_comments_number() ) :
   comments_template();
   endif;

アイキャッチ画像が大き過ぎたり、記事内の画像とダブるため、content-single.php からソースを削除。
   <div class="featured-thumb col-md-4"
   <?php the_post_thumbnail(); ?>
   </div> --.featured-thumb--




3_ メニューに基づいてページ作成

内容がない場合、タイトルだけでもメニューができるが、ダミー記事と画像を入れて置く。
親ページの下にくるメニューは、親を選択し、複数ある場合は順番も決める。(管理しやすい)
タイトル欄はタグが使える
※ 参考記例
<span style="font-size:16px;">Japanese style French restaurant</span> MORI NO FUU<br />
<span style="font-size:16px;">和風フレンチ</span> 杜のふう
     ↓
Japanese style French restaurant MORI NO FUU
和風フレンチ 杜のふう


「外観」「メニュー」で、サイトに表示させるメニューを作成。
投稿記事のテスト版を、画像入りで2〜3ほど書いて表示させて、見え方をチェック。
(大半は一覧表示で、今では少なくなった全文表示があり、一覧のデザインもいいものがある)

文字間の調整について・・・
半角は一度だけ有効、全角がその数だけ有効、タグの letter-spacing: 0.1em; を使ってシビアに調整することも

4_ 画像など準備・・・後でも可

クライアントのタイトル・ロゴの画像があるものは、データを用意しておく。(写真は jpg、グラフィックは png )
ファビコン用に、32px× 32px サイズの透過画像を作っておく。(多少大きくても可・正方形)
スライダーやヘッダー画像がある場合、サイズ指定に従う。(ヘッダー画像は、アップ後に高さ調整可能)
ACCESSページに地図が必要で有れば、Google から埋め込みコードをコピーして貼る。(サイズを調整)
<iframe style="border: 0px currentColor;" src=""width="100%" height="500" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
ソーシャルリンクを用意。(Facebookのみ、アカウントが無くてもタイムライン生成可能)
最近はスマホが主流になってきたので、利用が薄れたものの、必要で有れば QRコードを作っておく。
プラグインインストール・・・WP Lightbox 2 ・Meta Slider・Sugar Events Calendar など。

5_ 「カスタマイズ」・ウィジェット

オプションの「カスタマイズ」・・・ロゴ・ヘッダー画像・背景・スライダー・セクション・色・フォントスタイルなど
ウィジェットでもトップページのデザインできるものが増えてきた
サイドバーの位置(左・右・両方・フッター・なし)を選択(テーマによっては、ページごとに選択できる)
順番やタイトル表記は変えられる
固定ページ(メニュー)を追加できる・・・サイトマップとして使うことも
テキストでも追加できる(バナーリンク・QRコード・Facebook のタイムラインなど)

6_ style.css をカスタマイズ

テスト版の固定ページ・投稿記事を見て、何をカスタマイズ(修正)するのかを、メモっておく。
タグの中に class="" で指定している(id 名も有り)ので、css のタグを、サイトのソースを開いて調べることもある。
変えたいタグに class="" はあっても、style.css にない場合は追加で作る。

  背景の色・画像/リンクの色/
  基本のフォント(書体・大きさ・太さ・色・・・文字間スペース)
  タイトル/画像を使わない場合のサイトタイトル・ページタイトル・投稿記事タイトル
  エントリー内の見出し
  基本やタイトル・見出し以外で、よく使いたいフォント
  余白の margin(ブロックの外側) と padding(ブロック内)
  テーマのアクセントカラーを、必要で有れば変更
  色の表記・・・16進法(R G U) #000000 黒〜#FFFFFF 白/色名 black white red など

※ 参考サイトをブックマーク(まとめてフォルダ化)
  https://fonts.google.com/ 〜Google font サイト(IEはアクセス不可)
  http://www.colordic.org/ 〜原色大辞典
  https://www.colorcodehex.com/004ab3/ 〜コードの色や16進法が知りたい時
  http://www.htmq.com/text/index.shtml 〜特殊文字のリファレンス
  http://www.cman.jp/QRcode/ 〜QRコード作成サイト
  https://developers.facebook.com/docs/plugins/page-plugin 〜Facebookのタイムライン埋め込み
  https://www.synck.com/ 〜メールフォームCGI配布サイト
  https://www.google.com/webmasters/tools/home?hl=ja 〜Search Console - ホーム
  https://www.google.com/intl/ja_jp/analytics/ 〜Google アナリティクス公式サイト


カスタマイズ後、テーマごとクライアントフォルダにダウンロードしてバックアップを保存
その他のバックアップは、wp-config.php、 .htaccess の2つ(データベースへインストール後自動生成される)

※画像はサーバーに残るけど(wp-content→uploads の中に年・月ごとのフォルダ)、記事はデータベースのみ。

7_ バージョンアップについて

Wordpress 本体は、随時更新してください(自動更新の場合もあり)
Access Press と Wordpress チームのテーマは、頻繁に更新があります。
  テーマの更新は、必ずテーマのバックアップ(FTTP でPCへダウンロード)を取ってから更新し
  固定ページ・単一ページなど、カスタマイズしたものを上書き。
  戻した style.css の Version: ***//を、新しいバージョンに変える。

wp_1  wp_2  wp_3  wp_4  wp_5