【WordPressテーマ開発】HTML・CSSコーディングの前に知っておくべきこと

記事内に商品プロモーションを含む場合があります

WordPress側では「ページネーション」や「ウィジェット」などは機能はあらかじめ用意されています。

そしてそれらのクラス名も決まっているため、HTML・CSSで画面を作る前に知っておかないと後々修正が面倒です。

そこで、このページではWordPress側で既に用意されているHTML・CSSコードをまとめることにしました。

ページネーション
ウィジェット
メニュー

ページネーション

こういうやつですね。

記事数が設定値を超えた時に表示されます（WordPress側のデフォルトは１０件）。

これを作るには以下のコードを書くだけです。

<?php the_posts_pagination(); ?>

で、出力される内容が次の通り。

<nav class="navigation pagination" role="navigation" aria-label="投稿">
  <h2 class="screen-reader-text">投稿ナビゲーション</h2>
  <div class="nav-links"><a class="prev page-numbers" href="http://localhost:8888/wordpress/page/3/">前へ</a>
  <a class="page-numbers" href="http://localhost:8888/wordpress/">1</a>
  <span class="page-numbers dots">…</span>
   <a class="page-numbers" href="http://localhost:8888/wordpress/page/3/">3</a>
   <span aria-current="page" class="page-numbers current">4</span>
   <a class="page-numbers" href="http://localhost:8888/wordpress/page/5/">5</a>
   <span class="page-numbers dots">…</span>
   <a class="page-numbers" href="http://localhost:8888/wordpress/page/8/">8</a>
   <a class="next page-numbers" href="http://localhost:8888/wordpress/page/5/">次へ</a></div>
</nav>

なので、上記のクラス名に対してスタイルを当てていく必要があります。

ウィジェット

ウィジェットは表示する種類によって少し異なりますが、「widget」、「widgettitle」というクラス名はどのウィジェットにもあります。

<li id="recent-posts-3" class="widget widget_recent_entries"> <h2 class="widgettitle">最近の投稿</h2>
    <ul>
      <li>
        <a href="http://localhost:8888/wordpress/post1/">タイトル１</a>
      </li>
      <li>
         <a href="http://localhost:8888/wordpress/post2/">タイトル２</a>
      </li>
      <li>
        <a href="http://localhost:8888/wordpress/post3">タイトル３</a>
      </li>
      <li>
        <a href="http://localhost:8888/wordpress/post4/">タイトル4</a>
      </li>
    </ul>
</li>

なので、これらのクラス名を使ってスタイルを調整する必要があります。

メニュー

メニューはデフォルトだと次のような感じで出力されます。

<div class="menu-メニュー名-container">
  <ul id="menu-メニュー名" class="menu">
    <li id="menu-item-2216" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2216">
      <a href="http://localhost:8888/wordpress/about/">メニュー１</a>
    </li>
    <li id="menu-item-2217" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2217">
      <a href="http://localhost:8888/wordpress/contact/">お問い合わせ</a>
    </li>
  </ul>
</div>

ただ、出力する際に、外枠の<div>タグ（class名が「menu-メニュー名-container」の箇所）と、<ul>タグのクラス名は追加することができます。

書き方の例

<?php
  $params = array(
    'theme_location' => 'header_menu',
    'container_class' => 'p-nav',
    'menu_class' => 'p-menu',
  );
    wp_nav_menu($params)
?>

上記のように書くと、外枠の<div>タグに「p-nav」が、ulタグに「p-menu」が付与されます。

とりあえず、パッと思い浮かんだのはこの３つです。

他にもあったような気もしますが、また思い出したら追記します。