【WordPressテーマ】自作テーマ作成の記録 その8【2つ目】

WordPress
スポンサーリンク

こんにちは朱夏です。

今回もWordPressの自作テーマ進めていきたいと思います。

前回は、ヘッダーのナビゲーションバーを作成していきました。
今回はフッター部分をWordPress化していきます。

勉強させていただく動画はこちら。

 

フッターのリンク部分を、ポートフォリオリンクにしていきます。

コード

コードはこんな感じになりました。

<!-- テキストリンク -->
<div class="col-lg-4 p-5 border-secondary border-right border-left">
   <h4 class="font-weight-bolder text-center text-light border-bottom">Portfolio</h4>
   <div class="py-3">
      <?php
         $defaults = array(
            'menu_class'      => 'list-unstyled',
            'container'       => false,
            'link_before'     => '<span class="text-light">',
            'link_after'      => '</span>',
            'theme_location'  => 'footer-navigation',
         );
         wp_nav_menu( $defaults );
      ?>
   </div>
</div>
<!-- テキストリンク END -->

 

前回、ナビゲーションバーを作った時とやることはほぼ一緒ですね。
おさらいも兼ねてみていきます。

‘menu_class’でリンクにclassを付与しています。
ポートフォリオの欄では、リストのスタイルを消すために’list-unstyled’を指定しています。

リンクの文字色を経こうするために、’link_befoer’に<span>、’link_after’に</span>を付与する様に書きました。
そして<span>タグに文字色を白くするclassを指定しています。


そして、次は管理画面からの操作になります。
手順は以下の通りです。

    1. 外観>メニューを表示
    2. 「新しいメニューを作成しましょう。」リンクを押下
    3. 「メニュー名」を入力
    4. 「メニューを作成」を押下
    5. メニュー項目を追加>カスタムリンクを表示
    6. URLとリンク文字列を入力し、「メニューに追加」を押下
    7. メニュー設定>メニューの位置>フッターにチェック
    8. 「メニューを保存」を押下

簡単に操作順に番号を振ってみました。

 

今回は、カスタムリンクで、このブログのトップページのURLを入力して作りました。

実行結果

結果を表示するとこのような感じになりました。

 

Portfolioにリンクが表示されて、指定したブログを開く事が出来るようになりました。

 

あとがき

というわけで、フッターにポートフォリオのリンクを作成しました。
ナビゲーションとほぼ同じ作業だったため、繰り返しでいい練習になったかと思います。

今回は以上になります。
次回もよろしくお願いします。

タイトルとURLをコピーしました