WordPress テーマを作成する

2018/10/24 2018/11/25

WordPressでいくつものサイトを立ち上げてきたが、いつも既存のテーマを使用してカスタマイズしまくってしまう。
自分好みにするため、CSSのみならず、PHP自体にも手を加えてしまうことから、結果として生産性が悪くなっている気がする。

それならばと、重い腰を上げて今回初めてテーマの作成に挑戦してみた。

プログラムはExcelマクロをかじった程度の人間でも、コツさえ覚えてしまえばなんとかなるものなのがわかったのでここに最低限のやり方を残しておく。

なので、これからテーマ作成に挑戦してみようと思う方は、是非とも参考にしてもらいたい

テーマフォルダーにフォルダーを作成する

WordPressをインストールしたサイトを用意することは当然なので、割愛。
テーマを作成するために必要なのは、まずはテーマディレクトリーに今回作成するテーマを収録するディレクトリーを作成する必要がある。

テーマディレクトリーは、

wp-content - themes

にあるため、このディレクトリーに直下に今回作成するテーマ用ディクレトリーを作成する。

今回は便宜上「ab-theme」と名前をつけたので、そのディレクトリーを作成した。

以下が今回のテーマ作成したディレクトリー構成となる。

index.php、content.phpとstyle.cssをアップロードする

空ファイルで構わないので、上記で作成したディレクトリーに以下のファイルをアップロードする

index.php
content.php
style.css

テーマを選択が選択可能になったことを確認する

作成したテーマを選択します。
ダッシュボードの左手のメニューに「外観」があります。
この中から「テーマ」をクリックすることでテーマが選択可能になります。

現在インストールされているテーマの一覧が表示されます。

ただ、テーマ名しか表示されておらず寂しいですね。
「テーマの詳細」をクリックしても、やはりなにも表示されていません。
テーマ構築への長い道の
ここはモチベーションを上げるため、ここに画像やテーマの解説を表示させる方法からご紹介します。

テーマの詳細を作成する

ここでは、テーマの詳細に背景となる写真の設置方法と説明分の設置方法を簡単に紹介します。

簡単に説明すると、style.cssに記述すると説明文が表示、
screenshot.pngを設置することで背景画像が表示されることになります。

style.cssに追記する

/*
Theme Name: ab-theme
Theme URI: 
Author: 初めてのテーマチーム
Author URI: https://ie-excel.com/
Description: 初めてテーマを作成してみました。
Version: 0.1
License: 
License URI: 
Text Domain: 
Tags: 
*/

Theme Name: ab-theme

Theme URI:

Author: 初めてのテーマチーム

Author URI: https://ie-excel.com/

Description: 初めてテーマを作成してみました。

Version: 0.1

License:

License URI:

Text Domain:

Tags:

上記を設定することでテーマの詳細に作者名やバージョン、説明分などが追加されるようになります。

それぞれの意味合いは以下の通りです

Theme Name	テーマ名
Theme URI	テーマ開発元のURL
Author	テーマ作者名
Author URI	テーマ作者のURL
Description	テーマの説明
Version	テーマのバージョン
License	テーマのライセンス
License URI	テーマのライセンスURL
Text Domain	テーマのライセンスを定義するサイトのURL
Tags	テーマを分類するタグ名

screenshot.png をアップロードする

キャプチャ画像を縦横比3:4にトリミングした「screenshot.png」と名付けたファイルをテーマのディレクトリー直下にアップロードします。
公式サイトでは推奨する画像サイズは 880x660となっています。（実際には 387x290 のサイズで表示）
まだキャプチャーができない状況のため、以下の写真をアップしてみます。

テーマ選択画面を確認する

テーマ選択画面を確認すると、背景が設定されています。

テーマの詳細を確認

テーマの詳細画面を表示させると、バージョンや作者名などが表示されています。

しかしながら、まだ空ファイルを設定しただけですので、サイトをプレビューしても何も表示されません。

それでは簡単なサイトを作成してみましょう。

簡単なサイトを作成

index.phpの編集

index.phpを更新するには、ダッシュボードの左手のメニューに「外観」をクリック。
すると右手にメニューが現れるため、この中から「テーマ編集」をクリックします。

するとサイトの右手に先ほどアップデートしたファイルが二つあるので、「index.php」をクリックします

ここに以下を追加します。

<?php get_header(); ?>

<div class="wrap">
	
  <?php
    if ( have_posts() ) :  ?>

    <?php
      while ( have_posts() ) :
        the_post();
        get_template_part( 'content', get_post_format() );
      endwhile;

    else : 

      echo '<h1>Not found! </h1>';
    endif; ?>

</div><!-- .wrap -->

<?php
get_footer();

<?php get_header(); ?>

<?php

if ( have_posts() ) : ?>

<?php

while ( have_posts() ) :

the_post();

get_template_part( 'content', get_post_format() );

endwhile;

else :

echo '<h1>Not found! </h1>';

endif; ?>

</div>

<?php

get_footer();

そして「ファイルを更新」をクリックすることで、更新が完了。

ソースの説明

ヘッダーの表示

<?php get_header(); ?>

1	<?php get_header(); ?>

この処理はテーマ直下の「header.php」があればそれをインクルードし、存在しなければ/wp-includes/theme-compat/にあるheader.phpがインクルードされます。

今回はまだ「header.php」を作成していないため、存在しない時のheader.phpがインクルードされています。

記事の表示

記事の表示部分はコードは以下の通り

投稿記事が存在するかどうかで処理を分岐

<div class="wrap">
    <?php
        if ( have_posts() ) :
            ●●●
        else : ?>
            ・・・・
       <?php endif;  ?>
</div><!-- .wrap -->

<?php

if ( have_posts() ) :

●●●

else : ?>

・・・・

<?php endif; ?>

</div>

投稿データが存在するケースと存在しないケースで処理を分けています。

記事の件数分処理を繰り返す

while ( have_posts() ) :
　　■■■
endwhile;

while ( have_posts() ) :

　　■■■

endwhile;

次の記事を呼び出す

have_posts()

1	have_posts()

この処理で、記事の存在有無を振り分けています。

投稿記事が存在した場合、●●●の処理を実行
存在しな場合、・・・を実行することとしています。

記事があればconten.phpを呼び出す

get_template_part( 'content', get_post_format() );

1	get_template_part( 'content', get_post_format() );

the_post();で次の記事の存在を確認しています。

記事が存在した場合、その記事からcontent.phpを呼び出しています。

フッターの表示

<?php
get_footer();

1 2	<?php get_footer();

この処理を簡単に説明すると、テーマ直下の「footer.php」があればそれをインクルードし、存在しなければ/wp-includes/theme-compat/にあるfooter.phpがインクルードされます。

なお、PHPのタグが閉じられていません。
Wordpressでは閉じる。

content.phpの編集

<header class="entry-header">
  <?php
    if ( 'post' === get_post_type() ) {
      the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );    ?>

      <h4><?php the_content(); ?></h4>
      <h4><?php the_post_thumbnail();  ?></h4>	
      <h4><?php the_date(); ?></h4>
      <h4><?php the_permalink(); ?></h4>
      <?
      echo '</div><!-- .entry-meta -->'; }; 
    endif     ?>
 </header><!-- .entry-header -->

<?php

if ( 'post' === get_post_type() ) {

the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); ?>

echo '</div>'; };

endif ?>

</header>

single.phpの編集

<?php
get_header(); ?>

<div class="wrap">
  <div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

      <?php
        while ( have_posts() ) :
          the_post();
        get_template_part( 'content', get_post_format() );

        if ( comments_open() || get_comments_number() ) :
          comments_template();
        endif;

        the_post_navigation(
          array(
            'prev_text' => '<span class="screen-reader-text">' . __( 'Previous Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Previous', 'twentyseventeen' ) . '</span> <span class="nav-title"><span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '</span>%title</span>',
            'next_text' => '<span class="screen-reader-text">' . __( 'Next Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Next', 'twentyseventeen' ) . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ) . '</span></span>',
          )
        );

      endwhile; // End of the loop.
    ?>

    </main><!-- #main -->
  </div><!-- #primary -->
  <?php get_sidebar(); ?>
</div><!-- .wrap -->

<?php
get_footer();

<?php

get_header(); ?>

<?php

while ( have_posts() ) :

the_post();

get_template_part( 'content', get_post_format() );

if ( comments_open() || get_comments_number() ) :

comments_template();

endif;

the_post_navigation(

array(

'prev_text' => '<span class="screen-reader-text">' . __( 'Previous Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Previous', 'twentyseventeen' ) . '</span> <span class="nav-title"><span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '</span>%title</span>',

'next_text' => '<span class="screen-reader-text">' . __( 'Next Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Next', 'twentyseventeen' ) . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ) . '</span></span>',

)

);

endwhile; // End of the loop.

</main>

</div>

<?php get_sidebar(); ?>

</div>

<?php

get_footer();

header.phpを作成する

「get_header()」によりデフォルトのheader.phpが読み込まれても動作はします。
ですが、せっかくテーマを作成しているのですからheader.phpを自分で構築します。

といってもそれほど難しくありません。
最低限の「header.php」だけ設定します。

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="site">

<!DOCTYPE html>

<html <?php language_attributes(); ?> class="no-js no-svg">

<head>

<?php wp_head(); ?>

</head>

kakas

footer.phpを作成する

「get_footer()」によりデフォルトのfooter.phpが読み込まれても動作はします。
ですが、せっかくテーマを作成しているのですからfooter.phpを自分で構築します。

といってもそれほど難しくありません。
最低限の「footer.php」だけ設定します。

</div>
</body>
</html>

</div>

</body>

</html>

つお

→→→→

innerText	ファイナンス
outerText	テーブル

-テーマを作成する

Message コメントをキャンセル

: WordPress カスタマイザーをカスタマイズする

ヘッダーメディアに動画を追加ヘッダーメディアにのみですが動画をカスタマイザー ...

: WordPress ヘッダーを作る

</head>まで header.phpの内容 [cr ...

PREV: Wordpress カスタマイザーをカスタマイズする
NEXT: Excel VBAでieのフレームページを操作する