Help us understand the problem. What is going on with this article?

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を作ります。

WordPressコンソールのテーマ一覧を開くと既に新しいテーマが追加されています。

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

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

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

WordPressコンソールでテーマの詳細を開いてみると上記の内容が反映されています。

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

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

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

WordPressコンソールでライブプレビューするとh1タグの見出しが表示されます

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

6. 記事を表示する

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

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

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を有効にして表示すると以下のようにブログっぽく表示してくれます。

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

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

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へのリンクがつきました

8. header, footerを表示する

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

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();

?>

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

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

そこで、実際にheader.phpとfooter.phpを作ってやります。

header.php
<h2>Header</h2>
<hr>
footer.php
<hr>
<h2>footer</h2>

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

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

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>


「テーマ制作練習」とあるのがブログタイトルです。タイトルとブログの説明が付いてブログっぽくなってきました。

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

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

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

<?php wp_footer(); ?>
</body>
</html>

12. CSSを適用する

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

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

functions.php
<?php

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

add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );

これでCSSファイルを読むようになった筈なのでタグを追加していきます

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タグを追加

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タグを追加

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

<?php wp_footer(); ?>
</body>
</html>

↑ divタグを追加

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;
 }

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

まとめ

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした