WordPressのテーマ作成でPHP、CSS、jQueryの勉強をする

この記事は約11分で読めます。

今までいくつも子テーマを作ってサイトを作ったりしましたが、あるサイトのために全く新しくテーマを作りました。
WordPressだけでなくXOOPS CubeやNetCommonsでもテーマはいじってきましたが1から作るのは初めてでした。自分で作ってみると今まで知らなかった色々なことが分かりWordPressの勉強になりました。また、これからPHPやCSSやjQueryを始める方には自分でテーマを作ることでかなり勉強になるのではないかなと思ったのでそのことについても書きます。

スポンサーリンク

WordPressのテーマを作る最小構成とは

WordPressのテーマを1から作るにあたって、検索しました。そしてこの2つのサイトを参考にさせていただきました。

最小限のファイルでテーマを作成してみる

テーマの作成 WordPress Codex日本語版

これらを読んでまず必要なファイルは、

index.php
style.css
screenshot.png

の3つと言うことが分かりました。

フォルダを作って、screenshot.pngを作成する

まずは wp-content/themes/ の下に今回作るテーマのフォルダを作ります。ryusというフォルダを作りました。

screenshot.pngは無くても機能的には問題ありませんが、あった方が分かりやすいので作ります。推奨サイズは 880x660px ということです。

普通はそのテーマでWordPressを表示した状態をscreenshot.pngにするのだと思いますが、まだどんな外観にするかとかが決まっていないのでとにかくこのテーマが何か分かる適当な画像を作りました。

これを ryusフォルダに screenshot.png という名前で保存します。

最新のtwentyfifteenなどからコードをコピーしてみた

次に index.php を作ります。とりあえずこのテーマではトップページに投稿が表示されるだけの機能を持たせたいと思います。
最小限のソースをtwentyfifteenや他のテーマからコピーして作ってみました。

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/style.css"/>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- postsを全件表示している部分 -->
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h2><a href="<?php echo esc_url( get_permalink() ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
    <div class="content">
        <?php the_content(); ?>
    </div>
    <?php endwhile; endif; ?>
<?php wp_footer(); ?>
</body>
</html>

全部で18行の短いコードです。これを ryus フォルダに incex.php という名前で保存します。

style.cssを作成する

最初は特にCSSの指定もする予定はないのですが style.css はテーマに必須のファイルですので作成します。

/*
Theme Name: ryus
Theme URI: http://ryus.co.jp
Description: create theme and php, css, javascript practice
Author: mikaumoto
Version: 1.0
*/

Theme Name フォルダの名称
Theme URI テーマのuri 
Description テーマの説明
Author 著者。wordpress.comのユーザー名が推奨されているが、本名でもかまわない。

とりあえずCSSの記述は何も無くても大丈夫です。

これを ryusフォルダに style.css という名前で保存します。

これで ryus フォルダには、

index.php
style.css
screenshot.png

が揃いました。

インストールして見てみる

ダッシュボード 外観>テーマ をクリック

こんな感じで今作った ryus テーマが表示されています。

有効化してみます。

表画面を見るとなにもデザインされてはいないけれども投稿が全部表示されました。これが今作ったテーマ ryus の表示です。

ここでソースを見てみたのですが、<title>タグがありません。先ほどtwentyfifteenからコピーしたときの、

    <?php wp_head(); ?>

この行で<title>タグを出力しているはずなのですが。調べてみたところ、この wp_head() でTitleを表示するには、twentyfifteenのfunctions.phpで行っている

add_theme_support( 'title-tag' );

という記述が必要なようです。ryusフォルダにfunctions.phpを作成して、この行をコピペして保存しました。すると、

<title>default | Just another WordPress site</title>

こういう感じのタイトルが表示されました!

ここまで作った ryus テーマを使ってWordPressやPHP、CSS、jQueryの勉強をしてみたいと思います。

CSSをいじってみる

ではちょっとCSSの練習ということでいじってみたいと思います。style.cssを開いて、

/*
Theme Name: ryus
Theme URI: http://ryus.co.jp
Description: create theme and php, css, javascript practice
Author: mikaumoto
Version: 1.0
*/

body {
    font-size:18px;
    font-color:#333;
    line-height:16px;
    background-color:#f0e68c;
    width:80%;
    margin-top: 100px;
    margin-right: auto;
    margin-left: auto;
}
h2 a {
    text-decoration: none;
    color: #008800;
}

このように書いて、表示すると、

こんな感じになりました。だいぶ変わりましたね。こんな感じでどんなCSSの記述をすると表示がどのように変わるのかがわかるのでCSSの勉強をこれからしようとする場合などによいかなと思います。

PHPをいじってみる

では次にPHPをいじってみたいと思います。

WordPress私的マニュアル 関数 : 目次

から、関数を参照して表示してみます。

the_author – 投稿者名を表示する

を使って、

    <h2><a href="<?php echo esc_url( get_permalink() ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
    <div><?php the_author(); ?></div>
    <div class="content">
        <?php the_content(); ?>
    </div>

このようにしてみます。表示すると、

著者名が表示されました。

WordPress関係の関数だけで無く普通にPHPを書いて試せますので、

<?php echo date('Y-m-d'); ?>

とか書いて年月日を表示したり、if文を書いてみたり色々試してみることが出来ます。

functions.php でもPHPを書いてどのように動作するのかを試すことができます。

function my_scripts() {
    wp_enqueue_style( 'prefix-font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css', array(), '4.0.3' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

// h2にfontawesomeを追加する
function ryus_h2_add($text) {
    return '<i class="fa fa-smile-o" style="font-size:24px;margin-right:5px;"></i>'.$text;
}
add_filter( 'the_title', 'ryus_h2_add' );

以前blogで書いた、font-awesomeを使ってタイトルにマークを追加しています。

my_scripts でこのテーマにfont-awesome用のファイルをリンクして、ryus_h2_addで、the_titleにfont-awesomeのスマイルマークを追加しています。

これで表示すると、

こんな感じになります(^^)/

jQueryを勉強する

jQueryを勉強してみましょう。まず、functions.phpjQueryを使うための記述を追加します。

先ほど作った my_scripts にjqueryを使うためのコードjQueryを記述するためのファイルを追加します。

function my_scripts() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'ryus_custom', get_bloginfo( 'stylesheet_directory') . '/js/ryus_custom.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );


(昨日のblogと内容がそっくりですが)

そして、ryus テーマフォルダに js というフォルダを作って ryus_custom.js というファイルを作ります。jQueryはここに記述して試すことが出来ます。

単純に、

jQuery(function($){
    $(document).ready(function(){
        alert('Hello!');
    });
});

こんな感じで記述して、再読み込みすれば

このようにアラートが表示されます。

もうちょっとちゃんとした感じのjQueryを書いてみます。

index.php

    <div style="border:1px solid #777;padding:10px;">
    <div id="openclose">OPEN</div><div id="enter" style="margin-top:10px;font-weight:bold;display:none"> 入り口はこちら</div>
    </div>

このような記述を追加して表示します。

こんな感じになります。

ryus_custom.js
 を、

jQuery(function($){
    $(document).ready(function(){
        $('#openclose').click(function() {
            if($('#openclose').text() == 'OPEN'){
                $('#openclose').text('CLOSE');
                $("#enter").css('display', 'block');
            } else {
                $('#openclose').text('OPEN');
                $("#enter").css('display', 'none');
            }
        });
    });
});

このように変更します。これは idがopenclose となっているdiv要素をクリックしたときに、最初は表示されていない idがenterというdivを表示したり、隠したりする処理です。

この状態で

]

クリックすると、

このように OPEN  CLOSE になり、隠れていた 入り口はこちら が表示されます。再度 CLOSE をクリックすると

CLOSEOPENになり、表示されていた文字が隠されます。

こんな感じで色々とjQueryを試してみることができると思います。

まとめ:最小テーマを作ってみてわかったこと

分かったのは案外少ないファイルでテーマが一応表示されるのだなということです。また今までは子テーマにしていじりたいところだけをいじっていましたが1から自分で作るとwp_head()がちゃんと使うために必要な記述があったりと、色々知ることが多かったです。

最小のテーマは ryus こちらにzipファイルを置きましたので、試してみたい場合はダウンロードして触ってみてください(^^)/

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress theme テーマ 全般
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。