sidebar.php ウィジェットを使用しないでオリジナルで制作 カスタマイズ

テーマを利用する場合に、必ず存在する「sidebar.php」ファイル

通常ですと、管理画面の外観 > ウィジェットより利用したい項目を追加しますが、

ソースやスタイルシートが影響してしまいデザインが合わないケースで困ることが多いです。

そんな時に、必要最低限を表示する場合のベタコーディングになります。カスタマイズすることで、デザインの自由度が増えます。

■サイト内検索を設置したい場合
※ソースやスタイルシートはサンプルです。

<section class=”sd_search”>
<div class=”post-top-widget”>
<form role=”search” method=”get” class=”search-form” action=”★★ドメイン★★”>

<label>
<input type=”search” class=”search-field” placeholder=”検索ワードを入力してください” value=”” name=”s” />
</label>

<button type=”submit” class=”search-submit”></button>
</form>
</div>
</section>
■指定カテゴリを表示(新着情報を5件表示など)
※ソースやスタイルシートはサンプルです。

<section class=”sd_top”>
<h3 class=”sd_top_title”>カテゴリー名</h3>

<?php query_posts(‘category_name=★★スラッグ名★★&posts_per_page=★★表示件数★★&order=DESC’); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class=”box”>
<div class=”photo”><?php if (has_post_thumbnail()) : ?><?php the_post_thumbnail(’88_thumbnail’); ?><?php else : ?><img src=”<?php bloginfo(‘template_directory’); ?>/images/side_kiji_kari.jpg” alt=”記事画像”><?php endif; ?>
</div>

<p class=”kiji”>
<a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a>
</p>
</div>

<?php endwhile; ?>
<?php endif; ?>

</section>

■複数の指定カテゴリを表示
※ソースやスタイルシートはサンプルです。

<section class=”sd_new”>

<h3 class=”sd_new_title”>カテゴリー名</h3>

<?php query_posts(‘category_name=cate01,cate02,cate03,cate04,cate05,cate06,cate07,cate08,cate09,cate10,cate11&posts_per_page=5&order=DESC’); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class=”box”>
<p class=”date”><?php the_time(‘Y.m.d’); ?></p>

<p>
<a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a>
</p>
</div>

<?php endwhile; ?>
<?php endif; ?>
</section>

関連記事

  1. カテゴリー名、スラッグの取得方法

  2. Advanced Custom Fieldsを活用した条件分岐 (中身…

  3. WordPressをマルチサイト化

  4. ホームページ担当を”パソコンが得意な人”で選ん…

  5. メディア追加時の自動で挿入される「画像挿入時にwidthとheight…

  6. Advanced Custom Fieldsを活用した条件分岐 (中身…