アーカイブ: 投稿
投稿５
本文
投稿４
本文
wp_get_nav_menu_items() でメニューの全項目を配列で取得
<?php
$menu_location_id = get_nav_menu_locations()["nav_slug_registred"];// キーは register_nav_menus で指定したもの。返値は int。
$wp_term_object = wp_get_nav_menu_object($menu_location_id);
$menu_items = wp_get_nav_menu_items($wp_term_object);
?>
<nav>
<ul>
<?php
foreach($menu_items as $key => $item){
// current page かの判定
$current = ($_SERVER['REQUEST_URI'] == parse_url($item->url, PHP_URL_PATH)) ? 'font-bold' : '';
?>
<li><a href="<?= $item->url ?>" class="<?= $current ?>"><?= $item->title ?></a></li>
<?php
}
?>
</ul>
</nav>
<?php
WordPress の管理画面から登録したグローバルメニューは、wp_nav_menu()で表示させるものと思っていた。
そうするとき、bootstrap や tailwind の class を付けたい場合に、 nav_menu_css_classや nav_menu_link_attributesに介入する処理を書く必要があり、不親切な仕組みだなと思っていた。
ところが、登録したメニューのデータだけを取得する関数がある事を知ったので、記録に残す。
上記の wp_get_nav_menu_items() でメニュー情報だけを取得し、繰り返し処理にかければ、classは付け放題だ。
カレントページかどうかの判定は自力で行う必要があるが、上記のように簡単に判定できる。
wp_get_nav_menu_items() の引数は、get_nav_menu_locations() で得られる id でいいのかもしれない。
投稿３
本文本文
vite + tailwindcss + ぺらイチ html
vite の設定の練習を兼ねて。
vite プロジェクト作成、初期設定
npm create vite@latest
# プロジェクトに移動し、package.json に書かれたパッケージをインストール
cd つくったプロジェクトディレクトリ
npm i
# tailwind に必要なものを導入し、コンフィグファイルを生成
# postcss は vite に入っているので不要。
npm i -D tailwindcss autoprefixer
npx tailwindcss init
touch vite.config.jstailwind.config.js の編集
content 配列の要素に index.html を追加
/** @type {import('tailwindcss').Config} */
export default {
content: ['index.html'],
theme: {
extend: {},
},
plugins: [],
}vite.config.js の編集
import { defineConfig } from 'vite'
import path from 'path';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';
export default defineConfig({
css: {
postcss: {
plugins: [
tailwindcss,
autoprefixer
]
}
}
});もし vite.config.ts を使うなら、@types/nodeも入れておく。path が見つからない、と言われてしまう。
npm i -D @types/nodesrc/ 内の編集
いったん src/ 内のファイルを全削除。
main.ts と style.css を再作成。
rm ./src/*
echo import \'./style.css\' > ./src/main.ts
echo -e "@tailwind base;\n@tailwind components;\n@tailwind utilities;" > ./src/style.csssrc/main.ts 確認
import './style.css'src/style.css の確認
@tailwind base;
@tailwind components;
@tailwind utilities;index.html の編集
内容は何でもよい。
最低一つは tailwind css のクラスを使っておくとよい。
tailwind が効いているか確認できるし、npm run devしたとき、utility classes がひとつもありません、と怒られずにすむ。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + TS</title>
<script type="module" src="/src/main.ts"></script>
</head>
<body>
<div class="container mx-auto">
<h1 class="text-red-900">見出し</h1>
<p>本文</p>
</div>
</body>
</html>開発開始
npm run dev以上。