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に以下を記入します。
/*
Theme Name: customtheme
Author: hoge
Author URI: https://hoge.com
Version: 1.0
*/
WordPressコンソールでテーマの詳細を開いてみると上記の内容が反映されています。
5. とりあえず何か表示してみる
index.phpに以下の1行を記入します。
<h1>Custome Theme!</h1>
WordPressコンソールでライブプレビューするとh1タグの見出しが表示されます
静的なページ作るだけならここにモリモリ書いていけばとりあえず表示させる事は出来るわけですね。
6. 記事を表示する
WordPressのループを使って記事を表示してみましょう。
以下がhave_posts()が記事の有無を教えてくれるので、記事がなくなるまでwhile文で1つずつ表示するコードになります。have_posts()で記事があるか判定し、記事があるようならthe_post();で記事を１つ取り出し、the_title()で記事タイトル、the_content()で記事内容を取り出して表示しています。
<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を表示できます
<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()を記入すると表示されるようになります
<?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を作ってやります。
<h2>Header</h2>
<hr>
<hr>
<h2>footer</h2>
10. headerの内容を書いていく
言語や文字コードの表記やブログタイトル、ブログの説明文などをWordPress関数に書いてもらいます。また、wp_head()にstylesheetやjavascriptへのリンクなどの必要な情報を書いてもらいます。wp_head()を入れ忘れるとちゃんと動かなくなるので注意しましょう。
<!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()は必須です
<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イベントから呼び出すようにアクションを設定しています。
<?php
function custom_theme_assets() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );
これでCSSファイルを読むようになった筈なのでタグを追加していきます
<!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
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タグを追加
<hr>
<footer class="site-footer">
<p><?php bloginfo( 'name' ) ?></p>
</footer>
</div> <!-- closes <div class="container"> -->
<?php wp_footer(); ?>
</body>
</html>
↑ divタグを追加
/*
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の使い方が分かってきました。