本記事では前回に引き続きRaiseTechの最終課題に奮闘する筆者の学習記録を書いています。
RaiseTechやプログラミング学習が気になっている方はぜひ参考にしてみてください。
[PR]筆者が受講しているスクールはこちら
RaiseTechではAWS・Java・副業・デザイン・マーケティングに特化したコースがあり現場レベルのカリキュラムを短期間で学習できるエンジニアリングスクールです。
カリキュラムの質の高さはもちろん各サポートの質も高いことが特徴の一つです。
前回までの進捗状況
前回のお話はこちらから読むことができます↓
・CSSの背景画像が読み込まない
・jQueryが動かない
以上2つのエラーを解決することができました。
それではどんどん各ページのWordPress化を初めていきます。
WordPress化が必要なページ
課題完成に向けてどの部分をWordPress化しなくてはならないか書き出します。
・sidebar.php
・footer.php
・archive.php
・search.php
・single.php
この辺ですかね…。若干気が遠くなる量ですが順番に潰しましょう。
sidebar.phpの編集
ウィジェット機能をfunctions.phpでつける
サイドバーはWordPressの管理画面＞外観＞ウィジェットから編集できるようにしてあげます。
まだウィジェット機能がついていないので以下コードをfunctions.phpに記述し設置してあげます。
function hamburger_widgets_init() {
register_sidebar (
array(
'name' => 'All Menu',
'id' => 'menu_widget',
'description' => 'メニューの一覧です',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2 class="c-category-title">',
'after_title' => "</h2>\n",
)
);
}
add_action( 'widgets_init', 'hamburger_widgets_init' );before_titleの行ですがこちらはあとで指定したいものがあるのでクラスを付与しています。
ウィジェットを設定できる画面が出てきました。そしてドラックでカテゴリーをAll Menuへ持っていきます。
カテゴリーを登録する
そして管理画面＞投稿＞カテゴリーからカテゴリーを登録します。
主要な3つを登録しました。では簡単な記事を作りましょう。管理画面＞投稿＞新規追加から作ります。
こんな感じの簡易記事をサイド、ドリンクカテゴリーでも作りました。
そして、sidebar.phpを次のように書き換えます。
<aside class="l-main__right">
<div class="l-sidebar">
<div class="c-button__close">
</div>
<p>Menu</p>
<?php
if ( is_active_sidebar( 'menu_widget' ) ) :
dynamic_sidebar( 'menu_widget' );
else:
?>
<div class="widget">
<h2>No Widget</h2>
<p>ウィジットは設定されていません。</p>
</div>
<?php endif; ?>
</div>
</aside> またscss > object > componentに「_category-title.scss」を作成し以下を記述しました。
.c-category-title{
display: none;
}先程before_titileで指定したいことがあるためにクラスを付与したという部分の指定したかったことです。
これを記述しない場合、以下の画像のようにカテゴリーという文字が出てくるのでこれを消すために指定しました。
消せたのはいいのですが課題が何点か残りましたね。
こちらは次回修正してコーディングの時の状態に近づけていきましょう。
最後に
ウィジェット機能でカテゴリーを反映させることはできましたがまだまだお手本のサイドバーのスタイルには程遠いですね。
ここからプラグインやウィジェットの設定でお手本の形に近づけるように編集を進めていきます。
最後までお読み頂きありがとうございました。また次回もお読み頂けると嬉しいです。
コメント