WordPressテーマを自作する

WordPressテーマの作り方を勉強したまとめです

こちらのサイトそのまんまです
https://vegibit.com/wordpress-theme-development-tutorial-step-by-step/






# 1. 環境を作る

適当なローカルWordPress環境を作ります。
僕はXAMPP使ってます。

XAMPP環境の作り方
https://qiita.com/studio_haneya/items/7882599e9dabc39c6a29







# 2. themesディレクトリを探す

### ドキュメントルートを探す

まずドキュメントルートのディレクトリを探します。
XAMPPの場合 /xampp/htdocs/ がドキュメントルートです。
(Windowsでデフォルト設定でインストールしてる場合はc:/xampp/htdocs/になります)

### /wordpress/wp-content/themes/を探す

ドキュメントルート直下にwordpressディレクトリが見つかると思います。
/wordpress/wp-content/themes/がWordPressテーマを入れるディレクトリになります。
(XAMPPをWindowsにデフォルト設定でインストールしてる場合はc:/xampp/htdocs/wordpress/wp-content/themes/になります)

デフォルトでWordPress公式のテーマ3つ 'twentynineteen', 'twentyseventeen', 'twentytwenty' がwordpress/wp-content/themes/以下に見つかると思います。




# 3. とりあえずthemeをつくる

さっそくthemeを作っていきましょう。適当なテキストエディタ (Atomなど) で上で見つけた/themes/ディレクトリを開いて作業していきます。下のようにcustomethemeディレクトリを作り、中に何も書いてないテキストファイルindex.phpとstyle.cssを作ります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/abdaec44-e44f-00a4-681c-a007b32602d7.png" width=50%>
WordPressコンソールのテーマ一覧を開くと既に新しいテーマが追加されています。

# 4. themeのメタ情報をstyle.cssに書く

style.cssに以下を記入します。

```css:style.css
/*
Theme Name: customtheme
Author: hoge
Author URI: https://hoge.com
Version: 1.0
 */
```
WordPressコンソールでテーマの詳細を開いてみると上記の内容が反映されています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/5d0088e3-be8b-8c5f-786a-e5b75c7510a3.png" width=50%>












# 5. とりあえず何か表示してみる

index.phpに以下の1行を記入します。

```php:index.php
<h1>Custome Theme!</h1>
```
WordPressコンソールでライブプレビューするとh1タグの見出しが表示されます
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/ecffbbd1-8cd5-76bf-1ae3-47f07a680639.png" width=50%>

静的なページ作るだけならここにモリモリ書いていけばとりあえず表示させる事は出来るわけですね。









# 6. 記事を表示する

WordPressのループを使って記事を表示してみましょう。

以下がhave_posts()が記事の有無を教えてくれるので、記事がなくなるまでwhile文で1つずつ表示するコードになります。have_posts()で記事があるか判定し、記事があるようならthe_post();で記事を１つ取り出し、the_title()で記事タイトル、the_content()で記事内容を取り出して表示しています。

```php:index.php
<h1>Custome Theme!</h1>

<?php

if ( have_posts() ) :
	while ( have_posts() ) : the_post(); ?>

	    <h2><?php the_title() ?></h2>
	    <?php the_content() ?>

	<?php endwhile;

else :
	echo '<p>There are no posts!</p>';

endif;

?>
```

適当な記事を追加してからthemeを有効にして表示すると以下のようにブログっぽく表示してくれます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/d788915e-1462-dad5-6e4b-dd819de8f5ff.png" width=50%>







# 7. 記事へのリンクを追加する

the_permalink()で記事のpermalinkを表示できます

```php:index.php
<h1>Custome Theme!</h1>

<?php

if ( have_posts() ) :
	while ( have_posts() ) : the_post(); ?>

    <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
  	<?php the_content() ?>
      
	<?php endwhile;

else :
	echo '<p>There are no posts!</p>';

endif;

?>
```
permalinkへのリンクがつきました
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/b9da4a04-332e-7b8d-d103-4c4427e04637.png" width=50%>












# 8. header, footerを表示する

index.phpにget_header(), get_footer()を記入すると表示されるようになります

```php:index.php
<?php

get_header();

if ( have_posts() ) :
	while ( have_posts() ) : the_post(); ?>

    <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
  	<?php the_content() ?>

	<?php endwhile;

else :
	echo '<p>There are no posts!</p>';

endif;

get_footer();

?>
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/5807a778-1363-ed85-4c7e-f679858561e5.png" width=50%>














# 9. header.php, footer.phpを作る

本来get_header(), get_footer()はheader.phpとfooter.phpの内容を表示しますが、まだそれらのファイルがないので現在はデフォルトで設定されているheaderとfooterが表示されています。

そこで、実際にheader.phpとfooter.phpを作ってやります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/cb61c337-b6e7-5fe7-057a-6aea168e52b8.png" width=50%>

```php:header.php
<h2>Header</h2>
<hr>
```

```php:footer.php
<hr>
<h2>footer</h2>
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/5807a778-1363-ed85-4c7e-f679858561e5.png" width=50%>


















































# 10. headerの内容を書いていく

言語や文字コードの表記やブログタイトル、ブログの説明文などをWordPress関数に書いてもらいます。また、wp_head()にstylesheetやjavascriptへのリンクなどの必要な情報を書いてもらいます。wp_head()を入れ忘れるとちゃんと動かなくなるので注意しましょう。

```php:header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <title><?php bloginfo( 'name' ); ?></title>
  <?php wp_head(); ?>
</head>

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

<header class="site-header">
  <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1>
  <h4><?php bloginfo( 'description' ); ?></h4>
</header>
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/e38b029b-d953-2eeb-eb96-f3abae6345eb.png" width=50%>
「テーマ制作練習」とあるのがブログタイトルです。タイトルとブログの説明が付いてブログっぽくなってきました。










































# 11. footerの内容を書いていく

こちらもwp_footer()は必須です

```php:footer.php
<hr>
<footer class="site-footer">
    <p><?php bloginfo( 'name' ) ?></p>
</footer>

<?php wp_footer(); ?>
</body>
</html>
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/c4e6d87a-5b4d-7048-3d75-37bc8bdc5321.png" width=50%>














































# 12. CSSを適用する

通常のサイトだとheadタグ内にcssファイルへのリンクを書きますが、WordPressのthemeのように複数のファイルに分けて書いていく場合は、それぞれのファイルに書くのは混乱の元です。また、重複して読み込んで無駄に負荷を増してしまう事もありますので、functions.phpにまとめて記載する事が推奨されています。

以下のコードではCSSファイルを重複しないように読み込んでくれるwp_enqueue_style()を使ってCSSファイルのURLを指定する関数を、フロントエンドの出力時に発生するwp_enqueue_scriptsイベントから呼び出すようにアクションを設定しています。

```php:functions.php
<?php

function custom_theme_assets() {
  wp_enqueue_style( 'style', get_stylesheet_uri() );
}

add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );
```
これでCSSファイルを読むようになった筈なのでタグを追加していきます

```php:header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <title><?php bloginfo( 'name' ); ?></title>
  <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div class="container">
  <header class="site-header">
    <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1>
    <h4><?php bloginfo( 'description' ); ?></h4>
  </header>
```
↑ container classのdivタグを追加






```php:index.php
<?php

get_header();

if ( have_posts() ) :
	while ( have_posts() ) : the_post(); ?>

    <article class="post">
      <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
    	<?php the_content() ?>
    </article>

	<?php endwhile;

else :
	echo '<p>There are no posts!</p>';

endif;

get_footer();

?>
```
↑ post classのarticleタグを追加





```php:footer.php
  <hr>
  <footer class="site-footer">
      <p><?php bloginfo( 'name' ) ?></p>
  </footer>
</div> <!-- closes <div class="container"> -->

<?php wp_footer(); ?>
</body>
</html>
```
↑ divタグを追加





```css:style.css
/*
Theme Name: customtheme
Author: hoge
Author URI: https://hoge.com
Version: 1.0
 */

 body {
     font-family: Arial, sans-serif;
     font-size: 16px;
     color: #545454;
 }

 a:link, a:visited {
     color: #4285f4;
 }

 p {
     line-height: 1.7em;
 }

 div.container {
     max-width: 960px;
     margin: 0 auto;
 }

 article.post {
     border-bottom: 4px dashed #ecf0f1;
 }

 article.post:last-of-type {
     border-bottom: none;
 }

 .site-header {
     border-bottom: 3px solid #ecf0f1;
 }

 .site-footer {
     border-top: 3px solid #ecf0f1;
 }
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/f4a27b05-b231-8ad0-159c-732bfebe6659.png" width=50%>

あんまり変わってませんがスタイルが適用されました

# まとめ

という事でブログらしきものが出来て
なんとなくWordPressの使い方が分かってきました。