WordPress テーマ作成方法
テーマ
テーマディレクトリ
新規ディレクトリをテーマディレクトリに作成する
例： ～/wp-content/themes/test
必須ファイル
index.php 中身は空でOK
single.php 中身は空でOK
screenshot.jpg ※600×450ピクセル
style.css
テーマの選択・編集
上記必須ファイルを用意すると、管理画面においてテーマを選択できる。
テーマ → 有効化
テーマの編集 → (右側テンプレート一覧、スタイルシート一覧より)編集ファイルを選択
single.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>～</title>
テーマディレクトリ内のstyle.cssファイルURIを出力＆指定
<ling rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<ling rel="stylesheet" href="https://office-yone.com/wp-content/thmes/test/style.css">
</head>
<body>
<?php if(have_posts()): ?>
<?php while(have_posts()): ?>
記事データ取得
<?php the_post(); ?>
$post
$pages
等の変数に記事データが格納される
記事関連CSSクラス
<article <?php post_class(); ?>>
WordPressが自動生成して出力
タイトル
<h1><?php the_title(); ?></h1>
日付
<div class="postinfo">
<time datetime="<?php echo get_the_date( 'c' ); ?>">
<?php echo get_the_date(); ?>
</time>
</div>
記事本文
<?php the_content(); ?>
<div class="navlink">
<span class="navlink-prev">
postsテーブルにおける前の日付の記事リンクを出力
<?php previous_post_link(); ?>
</span>
<span class="navlink-next">
postsテーブルにおける次の日付の記事リンクを出力
<?php next_post_link(); ?>
</span>
</div>
</article>
<?php endwhile; ?>
<?php endif; ?>
</body>
</html>
style.css
＠charset "UTF-8";
テーマの有効/無効選択画面等に表示される説明文
/*
Theme Name: ～ (例：test)
Author: ～ (例：office-yone)
Description: ～ (例：This is my original theme.)
Version: ～ (例：1.0)
*/
GoogleFonts使用設定(フォント「Chango」を指定)
＠import url(http://fonts.googleapis.com/css?family=Chango);
body
{
font-familiy: ' メイリオ ', 'Hiragino Kaku Gothic Pro', sans-serif;
background-color: #edede3;
}
.postinfo
{
font-size: smaller;
～
}
.postinfo time
{
font-size: 12px;
～
}
Follow me!
