WordPress テーマを作成する
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 | テーマ名 |
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(); ?>
この処理はテーマ直下の「header.php」があればそれをインクルードし、存在しなければ/wp-includes/theme-compat/にあるheader.phpがインクルードされます。
今回はまだ「header.php」を作成していないため、存在しない時のheader.phpがインクルードされています。
記事の表示
記事の表示部分はコードは以下の通り
投稿記事が存在するかどうかで処理を分岐
<div class="wrap"> <?php if ( have_posts() ) : ●●● else : ?> ・・・・ <?php endif; ?> </div><!-- .wrap -->
投稿データが存在するケースと存在しないケースで処理を分けています。
記事の件数分処理を繰り返す
while ( have_posts() ) : ■■■ endwhile;
次の記事を呼び出す
have_posts()
この処理で、記事の存在有無を振り分けています。
投稿記事が存在した場合、●●●の処理を実行
存在しな場合、・・・を実行することとしています。
記事があればconten.phpを呼び出す
get_template_part( 'content', get_post_format() );
the_post();で次の記事の存在を確認しています。
記事が存在した場合、その記事からcontent.phpを呼び出しています。
フッターの表示
<?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 -->
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();
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">
kakas
footer.phpを作成する
「get_footer()」によりデフォルトのfooter.phpが読み込まれても動作はします。
ですが、せっかくテーマを作成しているのですからfooter.phpを自分で構築します。
といってもそれほど難しくありません。
最低限の「footer.php」だけ設定します。
</div> </body> </html>
つお
→→→→
innerText | ファイナンス |
outerText | テーブル |