2020/05/17 23:15
[Wordpress自作テーマ④]初心者の為のコーディング指南書「sidebar・single」
自作WPテーマ4回目となりました。今回は「sidebar.php」と「single.php」の記述例をご紹介します。
header、index、footerの例を前回にやってますが、この「index」内や固定ページ、シングルページで使う「サイドバー」の実装にまず移ります。
sidebar例
取り合えず前回のindex.phpの記述例です。
【index.php】
<?php get_header(); // header.phpをここに読み込みます ?>
<h1 class="">
<?php echo bloginfo('name');?>
</h1>
<p class="">
<?php echo bloginfo('description');?>
</p>
<div class="">
<main class="">
<h2 class="">BLOG</h2>
【省略】
</main>
<aside class="">
<?php get_sidebar(); // sidebar.phpをここに読み込みます ?>
</aside>
</div>
<?php get_footer(); // footer.phpをここに読み込みます ?>
「main」タグと「aside」タグがありますので、そこの「class=""」の箇所へスタイルを当てます。
ついでに「main」の1つ前のdivタグにもクラス名を当てます。
取り合えずスタイルの名前を追記しましょう。
・mainの1つ前のdivタグ
<div class="c-wrapper">
・mainタグ
<main class="c-main-wrapper">
・asideタグ
<aside class="c-sidebar-wrapper">
続いてSASSファイルにスタイルの記述を書きます。
SASSファイルの場所はこちらです。
phper_v1.0.0 ＞ lib ＞ sass ＞ project ＞ _project.scss
【_project.scss】
$sidebar-size: 320px; // サイドバーの幅。任意のサイズに変更してOK
.c-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.c-main-wrapper {
display: block;
position: relative;
top: 0;
left: 0;
width: calc(100% - #{$sidebar-size} - 30px);
height: 100%;
}
.c-sidebar-wrapper {
position: relative;
top: 0;
left: 0;
width: $sidebar-size;
height: 100%;
}
取り合えず命名規則みたいなものは自由でいいです。
任意でつけた名前でclass=""の中身とSASSファイルへの記述のつじつまが合えばOKとなります。
sidebar例
続いてサイドバー内の記述例となります。
※注意
恐らくですが、テンプレ一式の中には「sidebar.php」がデフォで入ってないと思いますので、新規作成で作ってください。
【sidebar.php】
<div class="">
<div class="">
<!-- About Me -->
<h2 class="">About Me</h2>
<div class="">
<img src="" alt="About Me Image" class="">
<h3 class="">
【管理者名前】
</h3>
<p class="">
【自己紹介等】
</p>
</div>
<!-- MENU -->
<h2 class="">Menu</h2>
<div class="">
<a href="<?php echo home_url('');?>/about" class="">
MENU1
</a>
<a href="<?php echo home_url('');?>/blog" class="">
MENU2
</a>
<a href="<?php echo home_url('');?>/contact" class="">
MENU3
</a>
</div>
</div>
<div class="">
<!-- BLOG CATEGORY & ARCHIVE -->
<div class="">
<div class="">
<div class="">
<?php wp_list_categories(array('show_count' => 1, 'title_li' => '<h2 class="">Category</h2>')); ?>
</div>
<div class="">
<h2 class="">Archive</h2>
<ul class="">
<?php wp_get_archives(array('type' => 'monthly')); ?>
</ul>
</div>
</div>
</div>
<!-- RECOMMENDED -->
<h2 class="">Recommended</h2>
<div class="">
<?php
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'orderby' => 'rand',
'posts_per_page' => 3,
);
$posts_query = new WP_Query( $args );
if ($posts_query->have_posts()) :
while ($posts_query->have_posts()) : $posts_query->the_post(); ?>
<div class="">
<a class="" href="<?php echo the_permalink($post->ID); ?>">
<p class=""><?php the_time('Y/m/d'); ?></p>
<h3 class="">
<?php the_title();?>
</h3>
</a>
</div>
<?php endwhile;?>
<?php endif; wp_reset_postdata(); ?>
</div>
</div>
</div>
「About Me」の箇所は管理者の自己紹介的なものを書くとよいでしょう。
次の「Menu」の箇所は固定ページ等へリンクを飛ばしたい場合にでも使いましょう。
その次の「カテゴリー」「アーカイブ」はよくある投稿記事カテゴリー毎の一覧や月別でのアーカイブ一覧等を表示させる為のリンクとなります。
最後に「Recommended」をつけておきましたが、これは「他の記事のオススメ」という形でランダムで3個分の過去の記事を表示させる時の記述例となります。
single例
さて次は「シングルページ」です。
これは投稿記事を公開した時の個別ページとなります。
WP管理画面より投稿した記事の1枚1枚の個別でのページです。
その個別ページのテンプレート記述例です。
【single.php】
<?php get_header(); ?>
<div class="">
<div class="">
<div class="c-wrapper">
<main class="c-main-wrapper">
<!-- DATE -->
<p class="">
<?php the_time('Y/m/d G:i'); ?>
</p>
<!-- TITLE -->
<h1 class="">
<?php the_title();?>
</h1>
<!-- DESCRIPTION -->
<div class="">
<?php echo apply_filters('the_content', get_post_meta($post->ID, the_content(), true)); ?>
</div>
<!-- CATEGORY -->
<div class="">
<div class="">
<?php $terms = get_the_terms($post->ID,'category'); ?>
<?php foreach ($terms as $term) : ?>
<object>
<a class="" href="<?php echo get_category_link($term); ?>">
<?php echo esc_html($term->name); ?>
</a>
</object>
<?php endforeach; ?>
</div>
</div>
</main>
<aside class="c-sidebar-wrapper">
<?php get_sidebar(); ?>
</aside>
</div>
</div>
</div>
<?php get_footer(); ?>
先程設定したmainとasideのclassの分は既に記載済みとなってます。
上から順に「DATE」が公開した日付を表示。
次に「TITLE」は記事のタイトルです。
そして記事の内容となる「DESCROPTION」があって、最後にその記事がどのカテゴリーに属してる記事なのかを表示させる「CATEGORY」の箇所となります。
そして最後にasideタグがあってサイドバーを読み込んである状態ですね。
さらに上下にはヘッダーとフッターの読込箇所もあります。
残りのclassに関しては自由に付け加えてみてもらって、同様に【_project.scss】ファイルにスタイルを追記していってもらえればOKです。
今回のまとめ
サイドバーとその表示例、記事の個別ページの記述例のご紹介でした。
相変わらずざっくりとした説明ですが、これくらいの方が勉強になるかと思います。
分からない事はとにかくググる！
classに関しては「こういう事をしたい」というものをそのまま単語で検索すればヒットしますので簡単です。
例えばタイトルの文字を大きくしたいのであれば
「css 文字 サイズ 指定」
とかでググれば全然OKです。これで答えがすぐに返ってきます。
だいたいこれで検索して出てくるサイトの記事で
font-size: 16px;
とか、こんな書き方にすればいいんだろうなってのが分かってきます。
次に「css 文字 色 指定」とかで検索すると
color: #ff0000;
っていう書き方を知ったりする訳です。
そうやって「実現したい事」+「css」とかでググるだけでちゃんと答えは返ってきます。
そして少しずつCSS（SASS）の書き方を覚えていけるのでHP作成が初めての方でも諦めないで少しずつでも進めてみてください。
では次回は固定ページ、カテゴリーページ、アーカイブページ辺りの事も紹介したいと思います。
現場から以上です！
618
PICK UP
Recommended
