Open2021/08/08にコメント追加14

イチからWordPressテーマを作成する

ピン留めされたアイテム

はじめに

このスクラップでは、イチからWordpressのテーマを作成してきます。
そのときの手順をまとめます。
WordpressのインストールやFTPなどについては触れません。

開発の環境

Wordpress 5.8
サーバーはロリポップ
FTPソフトは CommanderOne

参考にしたサイト

テーマフォルダの作成

テーマフォルダの場所は、wptest/wp-content/themes/
ここに新しいテーマのフォルダを作る。
今回は 「theme001」 フォルダを作成した。

すると、WordPressのテーマ設定に、追加したフォルダが表示されるようになる。

テーマに必要なファイルを揃える

フォルダを追加しただけなので、「壊れているテーマ」の中に入っている。
Wordpressテーマに最低限必要なファイルは、以下の２つ。

index.php
style.css

とりあえず、空ファイルを作成してみる。

すると、テーマとして認識されるようになる。

index.php を編集する

index.php はトップページに表示される。
ということで、index.php を編集してみる。

Wordpressのテーマエディタ上で編集。

すると、トップページにちゃんと表示されるようになる。

トップページのHTMLを書く

ベタでHTMLを index.php に書いていきます。

ヘッダーに画像を表示させる
ヘッダーにナビを表示させる
ブログの投稿一覧を表示させる
フッターにコピーライトを表示させる

<body>
    <!-- ヘッダー -->
    <header>
        <nav>
            <a href=".">ABOUT</a>
            <a href=".">WORKS</a>
            <a href=".">BLOG</a>
            <a href=".">CONTACT</a>
        </nav>
        <div class="header-photo">
            <img src="img/header.jpeg" />
        </div>
    </header>
	
    <!-- ブログ記事一覧 -->
    <div class="main">
        <h1>ブログ記事</h1>
	    <div class="blog">
		<img src="img/article.jpeg">
		<h4>あいうえお</h4>
		<p>あいうえおかきくけこさしすせそ</p>
	    </div>
	    <div class="blog">
		<img src="img/article.jpeg">
		<h4>あいうえお</h4>
		<p>あいうえおかきくけこさしすせそ</p>
	    </div>
    </div>
	
    <!-- フッター -->
    <footer>
        <p>Copyright (C) ouni. All Rights Reserved.</p>
    </footer>
</body>

表示した様子です。
画像が表示されない。。。

パスを指定して画像を表示させる

通常のHTMLのように単純な相対パスでは、画像を表示させることができませんでした。
PHPをつかって以下の記述をすることで、テーマフォルダのパスを設定することができます。

<div class="header-photo">
     <img src="<?php echo get_template_directory_uri(); ?>/img/header.jpeg" />
</div>

これで画像の表示ができました。

テーマの名前と画像を設定する

テーマの画像は、screenshot.jpeg という名前でファイルを作成します。
880×660の比率で作成します。
テーマのトップフォルダに配置します。

テーマの名前は、style.css に記述します。

/*
Theme Name: デモテーマ
*/

これで、テーマの名前と画像が以下のように表示されます。

Wordpress記事の一覧を表示させる

ダミーで以下の３つの記事を用意しておきます。

この記事一覧をトップページに表示させます。
index.php で以下のようにブログ記事を取得してきて表示させるように記述します。

<!-- ブログ記事一覧 -->
<div id="main">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <h1><a href="<?php echo get_permalink(); ?>"><?php echo $post->post_title; ?></a></h1>
        <div><?php the_content(); ?></div>
        <small><?php the_time('Y/m/d'); ?> </small>
    <?php endwhile; endif; ?>
</div>

これで、トップ画面にブログ記事を表示させることができました。

アイキャッチ画像を表示させる

投稿のアイキャッチ画像を有効にします。
アイキャッチ画像は functions.php で設定します。
ということで、functions.php を追加します。

functions.php に以下のように書きます。

<?php

// アイキャッチ画像の設定
add_theme_support('post-thumbnails');
set_post_thumbnail_size(160, 120, true);

これで、ブログの投稿画面でアイキャッチ画像を設定できるようになりました。
以下のようにアイキャッチ画像の設定が表示されます。

次にアイキャッチ画像をブログ一覧で表示させてみます。
index.php に以下を追記します。

<!-- ブログ記事一覧 -->
<div id="main">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <h1><a href="<?php echo get_permalink(); ?>"><?php echo $post->post_title; ?></a></h1>
        <figure class="thumbnail">
            <?php the_post_thumbnail(); ?>
        </figure>
        <div><?php the_content(); ?></div>
        <small><?php the_time('Y/m/d'); ?> </small>
    <?php endwhile; endif; ?>
</div>

これでトップページにアイキャッチ画像が表示されます。

faviconのつくりかたと設定

favicon画像をつくる

260 * 260 px の画像を用意する。

faviconデータの作成

以下のサイトで画像を指定してデータをつくる
https://realfavicongenerator.net/

##faviconの設定

header.php で設定

<head>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
</head>

faviconのチェック

以下のサイトで問題ないかをチェックできる。
https://realfavicongenerator.net/

Bootstrapを適用させる

header.php に以下を追記する。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

記事一覧をカード表示する

グリッドシステムを使うために、containerを body に設定します。

<body class="container">

Bootstrapのcardとcard-columnを使います。

<!-- ブログ記事一覧 -->
<div class="card-columns">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();　?>
<div class="card">
    <figure class="thumbnail">
        <?php the_post_thumbnail(); ?>
    </figure>
    <h4><a href="<?php echo get_permalink(); ?>"><?php echo $post->post_title; ?></a></h4>
    <p><?php the_content(); ?></p>
    <small><?php the_time('Y/m/d'); ?> </small>
</div>
<?php endwhile; endif;　?>
</div>

これでカード表示されます。

特定カテゴリの記事一覧を表示する

<?php
//読み込みたい内容の指定
$newarrival = get_posts(array(
	'posts_per_page' => 6, // 表示件数指定
	'category' => 1 // カテゴリID指定
));

//記事データがある場合の処理
if($newarrival):
?>
	<ul class="newarrival_list">
	<?php
	//記事データを一つづつ表示処理
	foreach($newarrival as $post):
	setup_postdata($newarrival);
	?>
		<li><a href="<?php echo get_permalink(); ?>"><?php the_time('Y/m/d'); ?> <?php echo $post->post_title; ?></a></li>
	<?php endforeach; ?>
	</ul>
<?php
//記事データがない場合の処理
else:
?>
	<div class="newarrival_nodata">
	<p>記事がありません</p>
	</div>
<?php
endif;
wp_reset_postdata();
?>

関数リファレンス