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!