デイトラweb制作上級編 DAY31~44⑭
nakano
卒業制作課題 14日目
メニューを動的にする
赤枠の部分をwordpressの管理画面で編集できるようにする
変更前
HTML
<!-- PC -->
<ul class="header__nav">
<li><a href="#">トップ</a></li>
<li><a href="#">当社について</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">導入事例</a></li>
<li><a href="#">お知らせ</a></li>
</ul>
<!-- PC ここまで -->
<!-- ドロワー -->
<ul class="drawer-content__items">
<li><a href="#">トップ</a></li>
<li><a href="#">当社について</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">導入事例</a></li>
<li><a href="#">お知らせ</a></li>
</ul>
<!-- ドロワー ここまで -->SCSS
// PC
.header__nav {
display: flex;
align-items: center;
li {
position: relative;
&:not(:first-child) {
margin-left: 46px;
&::after {
content: "／";
position: absolute;
left: -30px;
}
}
}
}
// ドロワー
.drawer-content__nav {
text-align: center;
li {
font-size: 16px;
&:not(:first-child) {
margin-top: 40px;
}
a {
display: block;
color: #fff;
}
}
}変更後
①functions.php（自作フォルダ直下）
→ メニューの登録
function my_menu_init() {
register_nav_menus(
array(
// 'キー' => '対応する値'
'global' => 'ヘッダーメニュー',
'drawer' => 'ドロワーメニュー',
'footer' => 'フッターメニュー',
)
);
}
add_action('init', 'my_menu_init');②固定ページ、投稿ページ、ホームページの作成
スラッグは
② → about
③ → service
④ → case
①⑤は 外観 > メニュー のカスタムリンクで作成する
※スラッグで反映されるファイルが決まる（aboutならpage-about.phpが反映）
設定 > 表示設定から
① → ホームページ
⑤ → 投稿ページ
にすることでスラッグに関わらず指定したphpファイルを表示できる
③メニューの構成
→ 外観 > メニュー
④コードを動的に変更
<!-- PC -->
<?php
wp_nav_menu(
array(
'depth' => 1,
'theme_location' => 'global',
'container' => 'false',
'menu_class' => 'header__nav',
'ul' => 'header__nav',
)
);
?>
<!-- PC ここまで -->
<!-- ドロワー -->
<?php
wp_nav_menu(
array(
'depth' => 1,
'theme_location' => 'drawer',
'container' => 'false',
'menu_class' => 'drawer-content__items',
'ul' => 'drawer-content__items',
)
);
?>
<!-- ドロワー ここまで -->ロゴとボタンも動的にする
<!-- ロゴ ホームページだけh1で表示 -->
<?php if (is_front_page()) : ?>
<h1 class="header__logo font-en"><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php else : ?>
<div class="header__logo font-en"><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a></div>
<?php endif; ?>
<!-- ボタン -->
<div class="header__download">
<a href="<?php $page = get_page_by_path('download');
echo esc_url(get_permalink($page->ID)); ?>">資料ダウンロード
</a>
</div>※get_page_by_path('移動させたいページのスラッグ')
まとめ
今回も卒業制作課題を進めました。
やはりwordpressを扱うことに慣れていないので大変です。。。
何から手を付けるべきかいまいちわからず、気づいたら作業に取り掛かっていないのに時間がたっていました。
とはいっても全く進んでいないわけではないので、引き続き卒業に向けて頑張りたいです！
