クロピグログ

職業訓練で学んだことまとめ

【WordPress授業四日目】オリジナルテーマ、WP特有のルール2

WordPress関数がVScodeで赤くされる時の解決方法

https://bonz-net.com/view-wordpress-functions-by-php-intelephense-793/


オリジナルテーマ作成

時間がかかるテーマ：予算・工数　大

  1. いろんな案件にマッチするテーマ
    配布して利用してもらうテーマ
  2. 案件が決まっていて全ページ管理画面から編集・追加・削除できる
    ※運用担当者に運用方法についてレクチャーが必要（重）
  3. 案件が決まっていて管理画面から編集・追加・削除できるページが限られている
    ※運用担当者に運用方法についてレクチャーが必要（中）
  4. 案件が決まっていて管理画面から投稿のみ編集・追加・削除できる
    ※運用担当者に運用方法についてレクチャーが必要（軽）

 

簡単にできるテーマ：予算・工数　小

 

 制作手順

 

メインループ処理

<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>
    <li class="Archive__item">
      <a class="Archive__link" href="<?php the_permalink() ?>">
        <figure class="Archive__thumbnail">
          <img class="Archive__img" src="<?php echo get_theme_file_uri('/img/thumbnail.jpg'); ?>" alt="ブログタイトル">
        </figure>
        <h2 class="Archive__title"><?php the_title() ?></h2>
        <div class="Archive__text"><?php the_excerpt() ?></div>
        <div class="Archive__date"><?php the_time('Y年m月d日') ?></div>
      </a>
    </li>
  <?php endwhile; ?>
<?php else : ?>
  <div class="Archive__error">表示するデータがありません</div>
<?php endif; ?>

※「Archive__title」→「BEM」のクラス名をつけている

 

 ■ 表示ループの仕組み

  1. URLから判断して見えないところでDBからページ情報を取得している
  2. 取得したページ情報は暗黙変数$wp_queryに格納される
  3. ループ開始と同時に「have_posts()」で確認
    暗黙変数$wp_queryのポインタ位置にページ情報があるか確認
    ※ポインタ移動はしない
  4. ページ情報があったらループ内で処理をする
  5. ループ内の最初で必ず「the_post()」を呼ぶ
    暗黙変数$postにポインタ位置のページ情報をオブジェクト形式で代入
    ※ポインタ位置を次に移動
  6. ループ内でテンプレートタブを使って必要情報を出力

 

アイキャッチ画像機能を使えるようにする

if文は念のためこの関数があるか確認している
if (function_exists('add_theme_support')) {
  add_theme_support('post-thumbnails');
}

 

■アイキャッチ画像について
「設定」>「メディア」で生成する画像サイズを指定できる

 

◇注意！
画像サイズを変更する前にアップロードしたものは新しく指定したサイズの画像を生成してくれない

 

◇旧画像のリサイズはプラグインで対応
「Regenerate Thumbnails」

https://ja.wordpress.org/plugins/regenerate-thumbnails/

「ツール」>「Regenerate Thumbnails」

ボタンを押せば再生成してくれる

※画像数が多いと処理に時間がかかるので途中で画面を閉じたり、リロードしない