WordPress オリジナルテーマ作成

WordPress オリジナルテーマ作成

WordPressのオリジナルテーマ作成についてまとめます。

下記記事に構築方法はまとめています。

WordPress ローカル環境構築【Windows】

ローカル環境で構築すすめる方法をまとめていきます。

テーマファイルの作り方 事始め

ローカルでのディレクトリに新しく作るテーマのディレクトリを作ります。

C:\Bitnami\wordpress-4.8.3-0\apps\wordpress\htdocs\wp-content\themes

今回は、jwsディレクトリとします。

テーマファイルの作り方 中身

できたディレクトリの中身にファイルを作っていきます。

/jws
├─ index.php
├─ style.css

WordPress関数の使い方

bodyにclassをつける

ページを区別するためにbodyにclassをつける。

<body <?php body_class(); ?>>

記事タイトルの出力

// 普通のタイトルタイトル出力
<?php the_title(); ?>

// 文字数が20文字以上の場合、後ろに「・・・」をつけて出力するサンプル
<?php
  if(mb_strlen($post->post_title, 'UTF-8')>20){
    $title= mb_substr($post->post_title, 0, 20, 'UTF-8');
    echo $title.'・・・';
  }else{
    echo $post->post_title;
  }
?>

記事本文を取得

<p>本文</p>という形で、pタグを含み本文が出力される。

参考

// 普通の本文を出力
<?php the_content(); ?>

// 文字のみ出力
<?php
    $content = str_replace('\n', '', mb_substr(strip_tags($post-> post_content), 0, 200,'UTF-8'));
    echo $content.'・・・';
?>

// 文字数が20文字以上の場合、テキストのみ取得して後ろに「・・・」をつけて出力するサンプル
<?php
if(mb_strlen($post->post_content,'UTF-8')>20){
    $content= str_replace('\n', '', mb_substr(strip_tags($post-> post_content), 0, 20,'UTF-8'));
    echo $content.'・・・';
}else{
    echo str_replace('\n', '', strip_tags($post->post_content));
}
?>

前の記事へ、次の記事へボタン

  • 前の記事は<?php previous_post_link(); ?>
  • 次の記事は<?php next_post_link(); ?>

引数を設定することで、様々な設定が可能

参考

<?php previous_post_link('%link', '前の記事へ'); ?>
<?php next_post_link('%link', '次の記事へ'); ?>

投稿日時の取得

引数を設定することで、フォーマットを変えられる。

WP全体の設定は、
「設定」→「一般」→「日付のフォーマット」
で変更可能

参考

<time datetime="<?php echo get_the_date('Y-m-d') ?>">
  <?php echo get_the_date() ?>
</time>

カテゴリの取得

カテゴリはthe_category()で取得する。

カテゴリ名をslagで取得して、クラスを付与し色分けすることも可能。

参考

// カテゴリを出力
<?php the_category() ?>

// 複数カテゴリがついたときに、間に「,」を挟むサンプル
<?php the_category(' , ') ?>


// カテゴリが単一の場合、クラス名をスラッグで取得して設定し、色分けを行うサンプル。
<span class="<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>">
  <?php the_category() ?>
</span>
// slugを「cat1」と「cat2」とすると
<style>
  .cat1{
    background-color: blue;
  }
  .cat2{
    background-color: black;
  }
</style>

記事のループ

ポストがある分だけループして投稿記事を取得して、タイトルや本文などの情報抜き出す。

// 例その1
<?php if(have_posts()): while(have_posts()): the_post(); ?>
  <div>
    <a href="<?php the_permalink(); ?>">
      <h1><?php the_title(); ?></h1>
      <div class="postinfo">
        <time datetime="<?php echo get_the_date('Y-m-d') ?>">
          <?php echo get_the_date() ?>
        </time>

        <span class="postcat <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>">
          <?php the_category(' , ') ?>
        </span>
      </div>
      <?php
        if(mb_strlen($post->post_content,'UTF-8')>200){
          $content= str_replace('\n', '', mb_substr(strip_tags($post-> post_content), 0, 200,'UTF-8'));
          echo $content.'……';
        }else{
          echo str_replace('\n', '', strip_tags($post->post_content));
        }
      ?>
    </a>
  </div>
<?php endwhile; endif; ?>

// 例その2
<?php $posts = get_posts('numberposts=7&category=3&order=DESC'); global $post; ?>
  <?php if($posts): foreach($posts as $post): setup_postdata($post); ?>
    <div class="news">
      <p class="day">
        <?php echo get_the_date("Y.m.d"); ?>
      </p>
      <p>
        <a href="<?php the_permalink(); ?>">
          <?php the_title(); ?>
        </a>
      </p>
      <?php
        if(mb_strlen($post->post_content,'UTF-8')>20){
          $content= str_replace('\n', '', mb_substr(strip_tags($post-> post_content), 0, 20,'UTF-8'));
          echo $content.'・・・';
        }else{
          echo str_replace('\n', '', strip_tags($post->post_content));
        }
      ?>
      <a href="<?php the_permalink(); ?>">すべて読む</a>
    </div>

  <?php endforeach; endif;?>
<?php wp_reset_postdata(); ?>

ポートフォリオ・お問合せはこちら