WordPress テーマ作成方法

テーマ
single.php
style.css

テーマ

テーマディレクトリ

新規ディレクトリをテーマディレクトリに作成する
例：～/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!

カテゴリー: WordPress

タグ: テンプレート

WordPress

2016/01/01

サーバー

2016/01/05