クロピグログ

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

【WordPress授業十日目】オリジナルテーマ7

検索機能

034：サイト内に検索フォームを設置 | JOBTECH.JP

035：検索結果一覧表示テンプレートを追加 | JOBTECH.JP

 

034：サイト内に検索フォームを設置

「archive.php」を複製し、検索結果一覧表示用テンプレート「search.php」を追加します。

 

◆WordOress検索フォーム

fromタグ

・action属性：トップページURLを指定

　　　　　　　home_url関数を使用

・method属性：get

 

inputタグ：検索キーワード入力用

　　　　　1行テキストボックス

・name属性：s

 

inputタグ：submitボタン

 

 

ヘッダーに記述するコード(P136)

ワードプレスの自動でクラス名つけてくれる関数

<body <?php body_class(); ?>>

自分で作ったクラス名は最初大文字にするなどして、区別化すると良い

 

音声読み上げしたほうがいい時記述

  <?php
  wp_body_open();
  // バージョン5.2以降必須関数
  // バージョン5.1以前はエラーになるので注意
  ?>

 

 

カスタムロゴ

・上の画像を管理画面で変更できるようになる

●HeaderPC

          <div class="HeaderPC__logo">
            <?php if (has_custom_logo()) : ?>
              <?php
              the_custom_logo();
              // 管理画面「外観」 > 「カスタムロゴ」
              // サイト基本情報の一番下で選択したロゴ画像を表示
              ?>
            <?php else : ?>
              <a class="HeaderPC__link -logo" href="<?php echo esc_url(home_url()); ?>">
                <img class="HeaderPC__img" src="<?php echo esc_url(get_theme_file_uri('/img/logo.png')); ?>" alt="ロゴ">
              </a>
            <?php endif; ?>
          </div>

 

●functions.php

add_theme_support('custom-logo');