1. TOP
  2. wordpress
  3. ワードプレスのテーマを作成してみる-1

ワードプレスのテーマを作成してみる-1

まずはシンプルにテーマを作ってみる

さてワードプレスのテーマを作成していきますが、まずはあまりムズカシイことは考えずにできるだけシンプルな形を作っていきましょう。

まずは新規フォルダを作っていきます。

デスクトップ画面を右クリックしてみましょう

「sample-blog」といったあたりの名前をまずつけておきます。

次にエディターを開いてみましょう。
ここではADOBEのDREAMWEAVERを使っていますが、エディターは特にどんなものでも構いません。
ただし「メモ帳」だけはやめておきましょう。

エディターを開いてみる

「オススメエディター」などで検索すると色々なものが出てくるかと思いますので探してダウンロードしてみておいてください。

そこから「新規ファイル」を作成していきます。

最近のエディターはDOCTYPEも含めてデフォルトでテンプレートの形になっているものが多いかと思います。

もし、テンプレがない場合はこちらをコピペして使ってみましょう。

テンプレート

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>無題ドキュメント</title>
</head>

<body>
</body>
</html>

ではそのまま作成したフォルダに「index.php」と名前をつけて「保存」しておきます

CSSファイルを作成してみる

再びエディターから「新規作成」で今度は「CSSファイル」を作っていきます。

ここではテーマのデータを書き込みます。

テンプレート

charset “utf-8”;
/* CSS Document */

/*
Theme Name:
Author:
Description:
Version:
*/

 

このあたりは自由に書いてもらってもいいと思います。

こちらは「style.css」と名前をつけて保存します。

functions.php screenshotを作成してみる

では同様に今度は「functions.php」を作成して起きますが、ここでは「index.html」に書かれていたテンプレートはすべて消去して以下のphpを書いてみます

テンプレート

<?php echo ‘hello, world’;

こちらも「functions.php」で保存しておきましょう。

次に「880x660」のサムネイル画像を作ります。

こちらの保存形式は「.jpg」でも「.png」でもかまいません。

「screenshot」と名前をつけて保存します。

さてここまででとりあえずのテーマはできました。

FTPソフトを使って実際にアップロードしてみましょう。

この場合、必ずフォルダから「wp-content」の中にある「themes」フォルダにアップロードしてください。

「Bitnami」を使ってローカル環境で作業している人はちょっと階層が深くなってしまいますが、以下の画像を参考に「作ったテーマフォルダ」を入れてみてください。

いずれにしても「wp-content/themes」の中に自分の作成したテーマが入っていれば問題ないです。

では実際にサイトにアクセスしてみましょう。

作成したscreenshotとテーマが表示されていればOKですので、こんどはテーマを「有効化」してサイト表示してみます。

はい、先程「functions.php」の「hello,world」が出力されました。

では「functions.php」の<?php echo ‘hello, world’;をすべて消して、今度は「index.php」を開いて</head>の直前には<?php wp_head(); ?>
</body>の直前には<?php wp_footer(); ?>

と入れておきます。

これはwp_headといった関数を呼び出して<head>内に必要なメタタグ・スクリプトなどを呼び出しています。wp_footerも同様です。

スタイルシートを読み込んで見る

では次にスタイルシートのリンクを読み込んでおきます。

テンプレート

<link rel=”stylesheet” href=”<?php echo get_stylesheet_uri(); ?>”>

そして今度は<h1>タグを使って「HELLO WORLD」を記述してみます。

次に「style.css」に「h1」タグに対して色指定を入れていきます。

ではリロードしてみましょう。

文字が赤く表示されればOKです。

 

Leave a comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です