爆速でWordPressのテーマを作成する方法

WordPressのオリジナルテーマ作ってみたい!でも、覚えることも多そうだしなんか難しそう。自分にはムリなんじゃないかとか、そう思ったことは無いでしょうか。

確かにWordPressは機能豊富で一からしっかり理解することはハードルが高いです。しかし、割りきって必要最小限の基本的な機能のみのテーマであれば、爆速(10分以内)でオリジナルテーマ作成することができるんです!

オリジナルテーマ用のフォルダを作成

まずはオリジナルテーマを作成するフォルダを作成します。フォルダはワードプレスをインストールしたフォルダから”wp-content/themes/”に作成しましょう。

オリジナルテーマ作成001

ここでは「sample」というフォルダを作成しました。

style.css作成

次に作成したフォルダに「style.css」というファイルを作成します。

オリジナルテーマ作成002

作成したファイルに下記内容を保存。

/*
Theme Name: sample

*/

WordPressは「style.css」のコメントアウト部分を見てテーマの情報を読み取るため、オリジナルテーマの情報はここに記述します。今回は”Theme Name”のみを設定しました。他にも設定出来る項目はありますが、爆速でテーマを作成するためそんなことに気を取られてはいけないのです。

index.php作成

次にindex.phpを作成します。index.phpはWordPressが必ず読み込む重要なファイルです。style.cssと同じ「sample」フォルダの中に作成しましょう。

オリジナルテーマ作成003

index.phpを作成後、WordPressの管理画面にログインし、「外観」→「テーマ」をクリック。

オリジナルテーマ作成004

sampleというテーマが追加されています。そう、これだけの作業でテーマが追加出来るんです!

しかしこのままではサイト側には何も表示されません。早速index.phpにプログラムを記述し、ブログ記事が表示されるようにしてみましょう。

<html>
<head>
    <?php wp_head(); ?>
</head>
<body>
    <h1>サンプル</h1>
    <?php if(have_posts()): ?>
        <?php while(have_posts()): ?>
            <?php the_post(); ?>
            <?php the_title( '<h2>', '</h2>' ); ?>
            <?php the_content('<p>続きを読む ≫</p>'); ?>
        <?php endwhile; ?>
    <?php else : ?>
        <p>まだ投稿はありません。</p>
    <?php endif; ?>
    <?php wp_footer(); ?>
</body>
</html>

コレで基本的な記事の一覧と記事の詳細が表示されます。

オリジナルテーマ作成005

たったこれだけの作業でブログの基本的な機能(投稿一覧・詳細)が実装されました。使用したWordPressの関数は、

の6つのみです。

function.phpを作成してcssファイルを読み込む。

基本的な機能が出来たらスタイルシートを適用してオリジナルテーマの色を出してみましょう。使用するCSSファイルは作成したstyle.cssを使用します。style.cssはテーマの情報を記載しましたが、スタイルシート用に使用しても構いません。

/*
Theme Name: sample

*/

h1, h2 {
    color: red;
}

次にfunction.phpというファイルを作成します。function.phpはindex.phpと同じ階層に作成すれば自動で読み込まれます。内容は次のようにします。

<?php
function sample_enqueue_scripts()
{
    wp_enqueue_style( 'sample-style', get_stylesheet_uri());
}
add_action( 'wp_enqueue_scripts', 'sample_enqueue_scripts' );

sample_enqueue_scriptsというstyle.cssを読み込ませる関数を作成し、add_actionでフックさせて実行されるようにしています。

オリジナルテーマ作成002

style.cssの内容が適用されました。

まとめ

爆速でテーマを作成する方法は以上になります。いかがでしたでしょうか。これだけなら10分以内でテーマが作成できますね。

それにしても機能が少なすぎると感じるかもしれませんが、まずは基本が大切です。その後必要になった機能を追加していけばいいのです。風呂敷を広げすぎると覚えることが多くて挫折します。

今回作成したものをベースにして関数リファレンスなどを参考にしながら、オリジナルテーマにどんどん機能を追加していくと面白いと思います。

コメントを残す