今までいくつも子テーマを作ってサイトを作ったりしましたが、あるサイトのために全く新しくテーマを作りました。
WordPressだけでなくXOOPS CubeやNetCommonsでもテーマはいじってきましたが1から作るのは初めてでした。自分で作ってみると今まで知らなかった色々なことが分かりWordPressの勉強になりました。また、これからPHPやCSSやjQueryを始める方には自分でテーマを作ることでかなり勉強になるのではないかなと思ったのでそのことについても書きます。
WordPressのテーマを作る最小構成とは
WordPressのテーマを１から作るにあたって、検索しました。そしてこの2つのサイトを参考にさせていただきました。
これらを読んでまず必要なファイルは、
index.php
style.css
screenshot.png
の３つと言うことが分かりました。
フォルダを作って、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をいじってみたいと思います。
から、関数を参照して表示してみます。
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.phpにjQueryを使うための記述を追加します。
先ほど作った 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 をクリックすると
CLOSEがOPENになり、表示されていた文字が隠されます。
こんな感じで色々とjQueryを試してみることができると思います。
まとめ:最小テーマを作ってみてわかったこと
分かったのは案外少ないファイルでテーマが一応表示されるのだなということです。また今までは子テーマにしていじりたいところだけをいじっていましたが１から自分で作るとwp_head()がちゃんと使うために必要な記述があったりと、色々知ることが多かったです。
最小のテーマは ryus こちらにzipファイルを置きましたので、試してみたい場合はダウンロードして触ってみてください(^^)/
コメント