Learning site for website creation

07:WordPress関数を使ってサイト情報を取得・表示する

  • 投稿日:2018年10月08日
  • 更新日:2018年11月21日

index.php

よく使う処理はWordPressがあらかじめ関数として用意しています。

特にファイルパスに関する記述はWordPress関数を使うことでテスト環境から本番環境へ移行しやすくなります。
ファイルパスを直に記述しないようにしましょう。

<!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(); ?>" />
</head>
<body>
<div class="container">

<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="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">
<ul class="menu">
<li><a href="/">メニュー</a></li>
<li><a href="/">メニュー</a></li>
<li><a href="/">メニュー</a></li>
<li><a href="/">メニュー</a></li>
</ul>
</div><!-- /.inner -->
</div><!-- /.nav -->

<div class="content">
<div class="main">
メインコンテンツ
</div><!-- /.main -->
<div class="sidebar">
サイドバーコンテンツ
</div><!-- /sidebar -->
</div><!-- /.content -->

<div class="footer">
<div class="inner">
<div class="copyright">
&copy; <?php echo date('Y'); ?>
<a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>.
</div>
</div><!-- /.inner -->
</div><!-- /.footer -->

</div><!-- /.container -->
</body>
</html>

コピペ用関数

<?php bloginfo('name'); ?>
<?php bloginfo('description'); ?>
<?php echo home_url(); ?>
<?php echo get_stylesheet_uri(); ?>
<?php echo get_template(); ?>
<?php echo get_template_directory_uri(); ?>
<?php wp_title('|'); ?>
<?php echo date('Y'); ?>

コピペ用全体

<!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(); ?>">
</head>
<body>
<div class="container">

  <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="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">
      <ul class="menu">
        <li><a href="/">メニュー</a></li>
        <li><a href="/">メニュー</a></li>
        <li><a href="/">メニュー</a></li>
        <li><a href="/">メニュー</a></li>
      </ul>
    </div><!-- /.inner -->
  </div><!-- /.nav -->

  <div class="content">
    <div class="main">
      メインコンテンツ
    </div><!-- /.main -->
    <div class="sidebar">
      サイドバーコンテンツ
    </div><!-- /sidebar -->
  </div><!-- /.content -->


  <div class="footer">
    <div class="inner">
      <div class="copyright">
        © <?php echo date('Y'); ?>
        <a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>.
      </div>
    </div><!-- /.inner -->
  </div><!-- /.footer -->

</div><!-- /.container -->
</body>
</html>

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

テンプレートに直に記述していた内容を関数で取得・表示しています。
特にファイルパス部分が関数に置き換わっていることを確認しましょう。

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

WordPress関数

bloginfo('name')

bloginfo('description')

home_url()

get_stylesheet_uri()

get_template_directory_uri()

get_template()

wp_title('|')

PHP関数

date('Y')

wp_title関数

ページタイトルを表示するには「wp_title()」を使用します。「wp_title()」は表示するページによって表示される内容が異なります。(サイトタイトルとは違うので注意)

トップページ(フロントページ) (何も表示されない)
固定ページ ページタイトル
投稿 投稿タイトル
カテゴリー一覧 カテゴリー名
タグ一覧 タグ名
年アーカイブ
月アーカイブ
日アーカイブ
検索結果一覧 検索結果:検索語
ページが見つからない ページが見つかりませんでした

試してみよう

下記URLにアクセスしてwp_title関数の表示結果を確認しましょう。

http://localhost/lesson1/hello-world/

http://localhost/lesson1/category/未分類/

http://localhost/lesson1/aaa/

調べてみよう

WordPressのテーマでは画像やCSSファイルなど外部ファイル取得に絶対パスをよく使います。それはなぜでしょう?

 

欠席者対応:wireframe02