クロピグログ

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

【WordPress授業八日目】オリジナルテーマ5

セキュリティ対策の4つの関数の判断

上から順に判断していく('ω')

 

  1. 出力内容がURLかパスか?
    YES:esc_url関数

  2. 出力位置が属性部分か?
    YES:esc_attr関数

  3. その他
    esc_html関数

  4. 「3」の結果タグが画面表示された場合
    wp_kses_post関数

 

 

昨日の内容

投稿詳細専用テンプレート追加

017:投稿詳細に前後記事リンクを表示 | JOBTECH.JP

018:カテゴリーを表示 | JOBTECH.JP

 

今日からの内容

アーカイブ専用テンプレート追加

019:アーカイブ一覧表示用テンプレート追加 | JOBTECH.JP


固定ページ専用テンプレート追加

020:固定ページ表示用テンプレート追加 | JOBTECH.JP

021:固定ページ表示用カスタムテンプレート追加 | JOBTECH.JP

 

functions.phpを使ったカスタマイズ

022:テーマ内でよく使う関数を定義 | JOBTECH.JP

023:投稿概要文の文字数を変更・省略記号変更 | JOBTECH.JP

024:CSSファイルの読み込み | JOBTECH.JP

 

 

 

019:アーカイブ一覧表示用テンプレート追加

home.phpとレイアウトや構成は一緒なので、

home.phpコピーして「archive.php」を作成する

 

アーカイブタイトル表示関数

<?php the_archive_title(); ?>

<header class="Archive__header">
  <h2 class="Archive__mainTitle"><?php the_archive_title(); ?></h2>
  <div class="Archive__subTitle">検索結果:<?php echo esc_html($wp_query->found_posts); ?></div>
</header>

※サブタイトルに、ついでに検索した件数表示

 

front-page.phpの「ブログ一覧 >」のリンクを正しくする

URLの書き方二種類(どちらでもいい)

href="<?php echo esc_url(home_url('/blog/')); ?>"
href="<?php echo esc_url(home_url()); ?>/blog/"

 

020:固定ページ表示用テンプレート追加

 

テーマ内に専用テンプレートを追加

投稿詳細表示テンプレート(single.php)を複製し、

固定ページ表示用テンプレート「page.php」を追加します。

 

投稿詳細表示テンプレートから必要ないものを削除し、クラス名変更

クラス名「Single」を「Page」に変える

その後、CSSにコード追加(page.cssの中身コピペ)

●page.phpのmain内(削除後)

<main class="Main -page">
  <article class="Page">
    <div class="Page__inner inner">
      <?php /***** メインループ開始 *****/ ?>
      <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>
          <header class="Page__header">
            <h2 class="Page__mainTitle"><?php the_title(); ?></h2>
            <div class="Page__date"><?php the_time('Y年m月d日'); ?></div>
            <?php if (has_post_thumbnail()) : ?>
              <figure class="Page__figure">
                <?php the_post_thumbnail('img_300_200'); ?>
              </figure>
            <?php endif?>
          </header>
          <div class="Page__body">
            <?php the_content(); ?>
          </div>
        <?php endwhile?>
      <?php else : ?>
        <div class="Archive__error">表示するデータがありません</div>
      <?php endif?>
      <?php /***** メインループ終了 *****/ ?>
    </div>
  </article>
</main>

 

 

021:固定ページ表示用カスタムテンプレート追加

テーマ内にカスタムテンプレートを追加

page.phpを複製して「custom-work01.php」追加

 

カスタムテンプレートは「固定ページ編集画面」でテンプレートを選択する時に使用する名称をコメントで記述

●custom-work01.phpの一番上

<?php
/*
* Template Name: 制作物01用
* Description: カスタムテンプレート名
*/
?>

 

「custom-work01.php」は固定ページなので、投稿日や内容はそのまま打ち込んでいく

 

管理画面「固定ページ」>「固定ページ編集画面」

f:id:chromiumpig:20201112153806p:plain

適当にタイトルと内容打ち込む

 

URLスラッグとテンプレート設定する

カスタムテンプレートを作成すると「ページ属性」パネルの「テンプレート」からカスタムテンプレートを選択できる

f:id:chromiumpig:20201112153837p:plain

 

トップページ(front-page.php)の制作のリンク繋げる

f:id:chromiumpig:20201112154104p:plain

<a class="Archive__link" href="<?php echo esc_url(home_url('/work01/')); ?>">

 

024:CSSファイルの読み込み

// 共通CSS
  wp_enqueue_style(
    'common_css',
    get_theme_file_uri('/css/style.css'),
    array('slick_css''slick_theme_css''aos'),
    filemtime(get_theme_file_path('/css/style.css'))
  );
 

wp_enqueue_style関数:

CSS読み込みタグをwp_head内で出力する関数

第1引数:名前(好きな名前でOK)

  一部予約語:読み込むCSSのパス

第2引数:読み込むCSSのパス

第3引数:事前に読み込むCSSの名前を配列指定

第4引数(省略可):バージョン番号

       ファイル名の後につけるクエリ文字列

       filemtime:ファイルの更新日時を取得(PHPの関数)

                 第1引数:対象ファイルパス