Learning site for website creation

27:サイト内検索フォームを設置する

  • 投稿日:2018年11月05日
  • 更新日:2018年11月06日

ウィジェットからサイト内検索フォームを設置するのではなく、テンプレートに直にサイト内検索フォームを設置します。

<?php get_search_form(); ?>

header.php

<?php
// テンプレート名・スラッグ名取得
global $template;
$temp_name = pathinfo($template, PATHINFO_FILENAME);
$slug_name = $post->post_name;
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title><?php bloginfo('name'); ?><?php wp_title('|'); ?></title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div class="container <?php echo $temp_name; ?> <?php echo $slug_name; ?>">

  <div class="header">
    <div class="inner">
      <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
      <p><?php bloginfo('description'); ?></p>
      <p><?php echo get_template(); ?></p>
      <div class="searchbox"><?php get_search_form(); ?></div>
      <div class="theme_img"><img src="<?php echo get_template_directory_uri(); ?>/img/image.png" alt="テーマ内画像" /></div>
    </div><!-- /.inner -->
  </div><!-- /.header -->

  <div class="global_nav">
    <div class="inner">
      <?php wp_nav_menu(); ?>
    </div><!-- /.inner -->
  </div><!-- /.nav -->

HTML出力結果

get_search_form関数出力結果

<form role="search" method="get" id="searchform" class="searchform" action="http://localhost/lesson1/">
  <div>
    <label class="screen-reader-text" for="s">検索:</label>
    <input type="text" value="" name="s" id="s">
    <input type="submit" id="searchsubmit" value="検索">
  </div>
</form>

このページで出てくる関数

WordPress関数は「公式サイトのドキュメント」で確認しましょう。

WordPress関数

get_search_form()

 

欠席者対応:wireframe10