LoginSignup
8
9

More than 5 years have passed since last update.

@RGS(FY)

超初級者がWordpressオリジナルテーマを作るために使えるコピペサンプル

Last updated at Posted at 2018-09-13

うったて

https://qiita.com/Gen6/items/d0a406855acadbc35eec
前回に引き続き、PHPがわからない人向け。

WordpressはCMSであるまえに、サイト制作を楽にするテンプレートエンジンであるという話。

対象者

HTMLとCSSくらいはとりあえずわかる。
PHPはよくわからん。
Wordpressはインストール経験あり、触ったことはある。

PHPの読み書きが人並み以上の方は対象としていませんのであしからず。

とりあえず覚えておいてほしいこと

<?php if(): ?>

<?php endif; ?>

<?php while(): ?>

<?php endwhile; ?>

これが一つの処理のブロックであるということ。ざっくりした説明ですがね。

オリジナルテーマを作るために不可欠なファイルを準備する

header.php
index.php
footer.php
single.php
page.php
sidebar.php
category.php
404.php
search.php
functions.php
style.css

これだけあれば普通のサイトを構築するに充分だと思います。以下説明とともにコードを書いていきます。

functions.php

あまりごちゃごちゃ書くと分かりづらくなるので、シンプルに必要最低限の中の更に必要最低限のものだけを書き加えます。

functions.php
<?php
add_theme_support( 'post-thumbnails' );

function register_my_menu() {
  register_nav_menu( 'header-menu',__( 'header-menu' ));
}
add_action( 'init', 'register_my_menu' );

?> のとじタグは要りません。
何を書いているかというと、投稿などのアイキャッチ機能をONに。
メニュー管理機能をONにするぞ、というだけ。

header.php

ヘッダーはトップページなのか、投稿ページなのかで分岐してヘッダー画像を変えたい事が多いのでそのように記載します。

header.php
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="<?php echo get_template_directory_uri(); ?>/style.css" rel="stylesheet" type="text/css" media="all"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="<?php echo get_template_directory_uri(); ?>/js/admin.js"></script>
        <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>
      <header>
        <div class="flex-box">
          <div>
            <h1>
              <a href="<?php echo esc_url( site_url() ); ?>">
                <img src="<?php echo get_template_directory_uri(); ?>/img/logo.png">
              </a>
            </h1>
          </div>
          <div class="searchbox">
            <?php get_search_form(); ?>
          </div>
        </div>

        <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

        <?php if( is_front_page() && is_home() ): ?>
        <div class="home-headerimg bg-box">

        </div>
        <?php endif; ?>

        <?php if( is_single() ): ?>
        <div class="single-headerimg bg-box">
          <?php if (has_post_thumbnail()) : ?>
          <style>
          .single-headerimg {
            background: url(<?php echo get_the_post_thumbnail_url(); ?>) no-repeat;
            background-size: cover;
          }
          </style>
          <?php else : ?>
          <style>
          .single-headerimg {
            background: url(<?php echo get_template_directory_uri(); ?>/img/noimage.jpg) no-repeat;
            background-size: cover;
          }
          </style>
          <?php endif ; ?>
        </div>
        <?php endif; ?>

      </header>

PHPがわからない人用にベタベタな書き方をしていますが、これで特に問題は無いんじゃないかと思う今日このごろ。logo.pngは各自用意してください。

もし投稿ページなら、投稿ページのアイキャッチをヘッダーに。という書き方をしている箇所はここ。

<?php if( is_single() ): ?>
        <div class="single-headerimg bg-box">
          <?php if (has_post_thumbnail()) : ?>
          <style>
          .single-headerimg {
            background: url(<?php echo get_the_post_thumbnail_url(); ?>) no-repeat;
            background-size: cover;
          }
          </style>
          <?php else : ?>
          <style>
          .single-headerimg {
            background: url(<?php echo get_template_directory_uri(); ?>/img/noimage.jpg) no-repeat;
            background-size: cover;
          }
          </style>
<?php endif ; ?>

めっちゃ冗長ですけど、分かりやすいとは思うのです。

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

bodyに自動的にクラスを付与します。これを書くだけでトップページ、投稿ページ、固定ページなど個別にユニークなクラスが自動的に吐き出されるのでクソ便利です。ちょっと冗長なクラスにはなりますが、気にしない。

<?php get_search_form(); ?>

Wordpressの検索機能を付ける場合はこれ。

前回と異なりメニューの出し方を以下のように記載していますが、まぁここを詳しく覚える前には手を動かすほうがいいでしょう。

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

トップページか、否か。を分岐させているのは以下の箇所。

<?php if( is_front_page() && is_home() ): ?>

例によって　<?php endif; ?>　までを指します。
同様に下層ページが投稿ページであるならという分岐をさせているのが以下の箇所。

<?php if( is_single() ): ?>

なんとなく分かりますよね。　is_page() とか色々出来ます。

footer.php

コードだけ。

footer.php
      <footer>
          <p class="copyright">Copyright©<a href="<?php echo esc_url( site_url() ); ?>"><?php bloginfo( 'name' ); ?></a> 2018 All Rights Reserved.</p>
      </footer>
      <?php wp_footer(); ?>
    </body>
</html>

404.php search.php

検索結果表示と、URLに該当するものが無い場合のファイルを書きます。

404.php
<?php get_header(); ?>
        <section>

                <h2>404</h2>

                <p>お探しのページは存在しないか移動しました。</p>
                <div class="searchbox">
                    <?php get_search_form(); ?>
                </div>

        </section>
<?php get_footer();?>
search.php
<?php get_header(); ?>
        <section>

                <h2>検索結果</h2>

                <ul class="news-area">
                <?php if ( !have_posts()) : ?>
                    <li>お探しの記事が存在しません。</li>
                    <div class="searchbox">
                        <?php get_search_form(); ?>
                    </div>
                <?php endif; ?>
                <?php while( have_posts()):the_post(); ?>
                    <li><a href="<?php the_permalink(); ?>"><span><?php echo get_the_date('Y年n月j日'); ?></span><?php the_title(); ?></a></li>
                <?php endwhile; ?>
                </ul>

        </section>
<?php get_footer();?>

検索結果があるか、ないかで条件分岐をさせています。ちょっと美しくはない書き方ですが気にしないでください。

                <?php if ( !have_posts()) : ?>
                    <li>お探しの記事が存在しません。</li>
                    <div class="searchbox">
                        <?php get_search_form(); ?>
                    </div>
                <?php endif; ?>
                <?php while( have_posts()):the_post(); ?>
                    <li><a href="<?php the_permalink(); ?>"><span><?php echo get_the_date('Y年n月j日'); ?></span><?php the_title(); ?></a></li>
                <?php endwhile; ?>

この箇所が条件分岐ですね。

single.php page.php

本来は分けたほうがいいかもですが、最初は全く同じでいいんです。前回の内容とほぼ同じです。

singel.php/page.php
<?php get_header(); ?>
<section>
    <?php if(have_posts()): while(have_posts()):the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <p><?php echo get_the_date('Y年n月j日'); ?></p>
    <div class="contents_area">
        <?php the_content(); ?>
    </div>
    <?php endwhile; endif; ?>
</section>
<?php get_footer(); ?>

category.php

カテゴリーに関してはカテゴリー名を取得しに行くようにします。

category.php
<?php get_header(); ?>
<section>
    <?php
        $category = get_the_category();
        $cat_name = $category[0]->cat_name;
    ?>

    <ul>
    <?php if(have_posts()): while(have_posts()):the_post(); ?>
        <li><span><?php echo $cat_name; ?></span><a href="<?php the_permalink(); ?>"><span><?php echo get_the_date('Y年n月j日'); ?></span><?php the_title(); ?></a></li>
    <?php endwhile; endif; ?>
    </ul>
</section>
<?php get_footer(); ?>

<?php echo $cat_name; ?>　でカテゴリー名を出す必要がなければ、以下の箇所は不要。

<?php
        $category = get_the_category();
        $cat_name = $category[0]->cat_name;
?>

sidebar.php

サイドバーという名前ですが、横にくっつくだけじゃなく好きなところに呼び出し可能です。これは好きなこと書いてください。

sidebar.php
<section class="sidebar">


</section>

index.php

フロントページになるので、ニュース新着を表示。
あとは先程のsidebar.phpも呼び出しするようにします。

index.php
<?php get_header(); ?>
        <section>

                <h2>News</h2>

                <ul class="news-area">
                <?php if(have_posts()): while(have_posts()):the_post(); ?>
                    <li>
                        <div class="thumbnail">
                            <?php if (has_post_thumbnail()) : ?>
                            <?php echo get_the_post_thumbnail(); ?>
                            <?php else : ?>
                            <img src="<?php echo get_template_directory_uri(); ?>/img/noimage.jpg" alt="画像がないよ" />
                            <?php endif ; ?>
                        </div>

                        <a href="<?php the_permalink(); ?>">
                            <span><?php echo get_the_date('Y年n月j日'); ?></span><?php the_title(); ?>
                        </a>
                        <span><?php the_excerpt(); ?></span>
                    </li>
                <?php endwhile; endif; ?>
                </ul>

        </section>
        <?php get_sidebar(); ?>
<?php get_footer();?>

今回新着記事にはアイキャッチ画像を自動で当てたいので、

<div class="thumbnail">
                            <?php if (has_post_thumbnail()) : ?>
                            <?php echo get_the_post_thumbnail(); ?>
                            <?php else : ?>
                            <img src="<?php echo get_template_directory_uri(); ?>/img/noimage.jpg" alt="画像がないよ" />
                            <?php endif ; ?>
</div>

もしサムネイルがあれば〜　の分岐を書きます。なければnoimage.jpgが呼び出される仕組み。noimage.jpgは適当に作っておくといいです。

style.css

書きます。

style.css
@charset "utf-8";
/*
Theme Name: origin
Description: オリジナルテンプレート
Version: 1
Author: あなたの名前
Author URI: あなたのURL
*/
body {
  margin: 0;
  padding: 0;
}

header h1 img {
  max-width: 100%;
}

.bg-box {
  height: 450px;
}

.home-headerimg {
  background: #333;
  background-size: cover;
}

.flex-box {
  position: relative;
  padding: 40px;
  display: flex;
  justify-content: space-between;
}

.searchbox {
  padding-top: 6vh;
}

.screen-reader-text {
  font-size: 0.8em;
}

#s {
  padding: 4px;
}

#searchsubmit {
  background: #00AF7B;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 4px;
}

.menu {
  background: #5394D6;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

.menu li {
  list-style: none;
  text-align: center;
  width: 100%;
}

.menu li a {
  background: #5394D6;
  color: #fff;
  display: block;
  padding: 10px;
  text-decoration: none;
  transition: all 1s;
}

.menu li a:hover {
  background: #5BB8D6;
}

section {
  position: relative;
  min-height: 20vh;
  padding: 40px;
}

.news-area {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

.news-area li {
  list-style: none;
}

.news-area .thumbnail {
  overflow: hidden;
  width: 300px;
  height: 200px;
  position: relative;
}

.news-area .thumbnail img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}

.news-area li a {
  text-decoration: none;
  color: #5394D6;
}

.news-area li a:hover {
  text-decoration: underline;
}

.news-box h2 {
  font-size: 1em;
}

.news-box h2 a {
  color: #5394D6;
  text-decoration: none;
}

.news-box span {
  font-size: 1em;
  margin-right: 1em;
}

.sidebar {
  background: #333;
  background-size: cover;
}

footer {
  background: #f4f4f4;
  padding: 20px;
}

.copyright {
  text-align: right;
}

.copyright a {
  text-decoration: none;
  color: #000;
}

@media screen and (max-width: 680px) {
  header h1 {
    width: 100%;
  }
  .flex-box {
    flex-wrap: wrap;
  }
  #s {
    border: 1px solid #d8d8d8;
  }
  .menu {
    flex-wrap: wrap;
  }
  .menu li {
    width: 50%;
  }
  .sidebar {
    background-position: right;
  }
  .bg-box {
    height: 250px;
    background-position: center;
  }
  .news-area {
    flex-wrap: wrap;
  }
}

諸注意事項

必ずローカル環境で試してくださいね。

あと、メニューは4つ以上を想定していないので、4つ以上並べる場合はレスポンシブの調整上手くやってください。

Kindle本にまとめました
https://www.amazon.co.jp/dp/B07KS4RXG8

8
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
9