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;
 ~
}

コメントを残す

メールアドレスが公開されることはありません。