トップページ

トップページの内容は、front-page.php です。
front-page.php を変更してトップページを作成してください。
※固定ページ「Front-page」は削除しないでください。

シンプルなギャラリー機能

シンプルなギャラリー機能であれば、「メディア追加」ポップアップにある「ギャラリー作成」から設置できます。
ワードプレス標準のギャラリー機能をカスタマイズして任意のjsライブラリでギャラリーを表示できるようになっています。

下記のようなショートコードが挿入されます。

      [gallery size="large" ids="13,14,15,16,11,12"]
    

テンプレートは下記のファイルです。
SliderProでの実装してあります。

      content-gallery.php
    

インストール直後にすること

・検索エンジン避け (設定→表示設定)

・投稿へのコメントを禁止する (設定→ディスカッション設定)
　「新しい投稿へのコメントを許可する」のチェックを外す

・よく使うプラグインの一括インストールと
　初期プラグイン「WP Multibyte Patch」の有効化、「Hello Dolly」は削除する

・使わない初期テーマを削除

納品前にすること

・ワードプレス本体、プラグインを最新バージョンに更新する (ダッシュボード→更新)

・不要なプラグインは削除する

・不要な投稿、ページを削除する

・SEO設定がしてあるか確認する(タイトル、ディスクリプション、リダイレクトなど)

本番環境に移行後

・お問い合わせの確認

・「検索エンジン避け」が設定されていないか確認

・旧URLのリダイレクトが正常に働くか確認

アーカイブでのクエリをカスタマイズ

アーカイブのカスタマイズは archive_custom_search() を使用します。
functions.php にサンプルコードが有ります。

▼WP_Queryマニュアル
https://wpdocs.osdn.jp/関数リファレンス/WP_Query

各ページでの h1タグ の設定

seo_h1() を使用します。
固定ページのh1は「cf_seo_h1_txt」でカスタムフィールドを作成してください。
アーカイブなどは関数内で個別に定義します。

PC/スマホでページ内コンテンツを切り替える

下記のようにショートコードを使います。

      [pc_only]PCのみ表示されます[/pc_only]
      [sp_only]スマホのみ表示されます[/sp_only]
    

メディアIDから画像URLだけ取得する

get_thumb_src()関数の使います。
投稿のアイキャッチやカスタムフィールドで設定した画像URLの取得に使います。

      メディアIDから画像URLだけ取得します。※投稿ループ内での使用例
      <img src="<?php echo get_thumb_src(get_post_thumbnail_id(), 'medium'); ?>" alt="">
    

      代替画像がある場合 ※/img/post_thumb.jpg を読み込みます
      <img src="<?php echo get_thumb_src(get_post_thumbnail_id(), 'medium', true); ?>" alt="">
    

      任意の代替画像がある場合 ※/img/post_thumb2.jpg を読み込みます
      <img src="<?php echo get_thumb_src(get_post_thumbnail_id(), 'medium', true, '/img/post_thumb2.jpg'); ?>" alt="">
    

テンプレートパーツを読み込むショートコード

各ページで共通のパーツが必要な場合に使います。
parts-sample01.php を読み込むサンプルコード。

      [template_part slug="parts" name="sample01"]
    

内部的に get_template_part を使用して任意のテンプレートパーツを表示します。
https://wpdocs.osdn.jp/関数リファレンス/get_template_part

その他関数

      get_device_type … デバイスを判定
      get_url_param … GETパラメータを取得
      get_nav_archive … 標準関数を利用したページ送り(アーカイブ)
      get_nav_posts … 標準関数を利用したページ送り(投稿)
      get_nav_archive_org … 独自仕様のページ送り
    

フォーム関連

      make_input … テキストフィールドを作成
      make_dropdown … セレクトボックスを作成
      make_checkbox … チェックボックスを作成
      make_radio … ラジオボタンを作成
    

よく使うプラグインの一括インストール

①まず初めに「WPCore Plugin Manager」をインストールします。
②メニュー「WPCore」から「Collection key」を追加します。
　キーは「lflYhVvGgSi4bbyfG5OA」です。
③キーを追加できたら、「Install Plugins」をクリックしてインストール画面に。
④プラグインのリストが表示されるので、全て選択もしくは必要なものだけ選択して、「Install」→「適用」
⑤インストールしたプラグインは有効化されていないので、再度選択しなおして「Activate」

カスタムフィールドは「Custom Field Suite」をメインで使用します。

カスタム投稿のパーマリンクは、「Custom Post Type Permalinks」使用して「/投稿タイプ/数字/」 の形式にする
プラグイン導入後「パーマリンク設定」で「/%post_id%/」を設定する

フィールド名の付け方

フィールド名は「cf_スラッグ_フィールド名」の形式にします。
複数のカスタム投稿などを使う場合に区別するためにこの形式にします。

      ・スラッグ … 投稿タイプ名などを使います。長い場合は短くしていいです。
      ・フィールド名 … 任意のフィールド名

      例)
      cf_puppy_name
      cf_puppy_size
    

画像を扱う場合

「返り値」を選択出来る場合は、「ファイルID」を選択します。
表示するときに適切なサイズを取得できるようにするためです。
ファイルURLは、get_thumb_src() で取得できます。

      $img_src = get_thumb_src(CFS()->get('cf_puppy_img), 'large');
    

セレクトボックスやラジオボタンを使う場合

選択肢の設定では「キー」「値」を任意で指定できます。
例えば性別のフィールドを作成する場合、キーには数字などを指定します。

      1 : 女の子
      2 : 男の子
    

ループを使う場合

カスタムフィールドから配列を受け取ってループを使う場合は、受け取った値が配列データかどうか確認する処理を行います。
未入力の場合で配列データ以外のデータを受け取った場合にループ文でPHPエラーになるためです。

      $dogs_img_loop = CFS()->get('cf_dogs_img_loop');
      if(!is_array($dogs_img_loop)){
        $dogs_img_loop = array(); // 空の配列をセット
      }
      
      foreach($dogs_img_loop as $img){
        // 処理
      }
    

Yoast SEOの設定について

SEO メニュー「ダッシュボード」→「機能」で「詳細設定ページ」を有効にする。
有効にするとメニューに「タイトル＆メタ」「XMLサイトマップ」などが表示されます。

タイトル＆メタ

▼タイトル設定
%%sitename%% → %%sitedesc%% に変更する
sitedesc は「設定→一般」の「キャッチフレーズ」が入ります

TOPページタイトルは基本的に「地名 + 業種 + 事業名」のキーワードで構成する。
※なるべく文字数は「31文字」に収まるように

    例) 福岡市博多区のホームページ制作 | 株式会社ユニバース
    

下層ページは、「ページ名 + %%sitedesc%%」になるように。
このとき「%%sitedesc%%」には、事業名だけでなく地名なども含めた文字列を設定しておく。

      例) 制作料金 | 福岡市博多区でホームページ制作会社 - ユニバース
    

上記の設定はあくまで基本テンプレートとしての設定です。
ページ毎にSEO対策を重視する場合は、個別に調整したものを設定します。

▼アーカイブ設定
各投稿タイプのアーカイブでは「アーカイブ」という文字は削除する。

また詳細ページを使わないものは「noindex」に変更します。
「Yoast SEO メタボックス」も「非表示」に。
「Yoast SEO メタボックス」は固定ページ以外は基本的に非表示でいいです。

XMLサイトマップ

「投稿タイプ」タブで不要なものを除外します。
設定したら「全般→XML サイトマップ 」をクリックして内容を確認します。

リダイレクト

リニューアル案件などで各ページのURLが変更になる場合は、
各ページが旧URLから新URLにリダイレクトできるように設定を行う。(プラグイン：Redirection)

「site:ドメイン」で検索するとインデックスされているページの一覧が分かるので、活用してください。

画像を使うかテキストで書くか

サイドバーに設置するボタン的な要素は画像で大丈夫です。（alt にテキストを書く）
時短のメリットがある場合は下記のような判断基準で画像を使って大丈夫です。

      1. テキストの内容など後から変更することは無さそうなもの
      2. SEO対策の要素として必要ないもの
      3. CSSでは再現しづらいデザインやブラウザ互換に手間が掛かるデザイン
    

【補足】
SEO対策に必要かどうかはそのテキストが検索ワードになりうるかどうかで判断してください。

変数の値を確認したいとき

下記のようにすると配列データなどを見やすく整形した形で確認できます。
ショートカットなどに登録してすぐ使えるようにしておくと便利です。

      echo '<pre>';
      print_r($object);
      echo '</pre>';
    

本番稼働中のサイトでコードをテストしたい場合

社内IP（153.142.120.190）だけで動くようにif文で囲めば、一般ユーザーに見られること無くコードをテストできます。

▼受け取ったデータを確認したいときなど

      if($_SERVER['REMOTE_ADDR'] == '153.142.120.190'){
        $object = CFS()->get('cf_object');
        echo '<pre>';
        print_r($object);
        echo '</pre>';
      }
    

cssやjsのキャッシュを無視したい場合

▼開発中に、常に無視したいとき

      <link rel="stylesheet" href="../PATH/TO/style.css?<?php echo time(); ?>">
      ↓
      <link rel="stylesheet" href="../PATH/TO/style.css?1728262264">
    

▼公開後は、変更した日付などを手動で

      <link rel="stylesheet" href="../PATH/TO/style.css?20170724">
    

変数の値を確認したいとき

下記のようにするとデベロッパーツールのコンソール画面にテキストを表示できます。

      var object = $('#hoge').attr('href');
      console.log('object', object);
    

フォント変更用のCSSクラス

Windows(8.1以降) と Mac(10.12 Sierra以降) で使用できる下記のフォントが指定されます。

.gothic … 游ゴシック体
.mincho … 游明朝体

      ゴシック体の場合は「class="gothic"」を付ける
    

      明朝体の場合は「class="mincho"」を付ける