あまめも

[甘]とりあえず、グローバルメニューの作成完了?

こんばんは、あますた(@amaguristar)です。
以前から追加しよう・追加しようと思っていた『グローバルナビ』をやっと作ったのでその報告です。

結構長かったかな?

WordPress標準のテーマを使えば直ぐにできるのに、本を見ながら”カタカタ”作ったので非常に手間でした。
まぁ、勉強になったから良いんですけどね〜。

管理画面にメニューを表示

まずは、管理画面にメニューを表示するところから。
テーマによっては、この画面がない物もあるので「function.php」に

20150305_001

を追加。
そうすると、管理画面に

20150305_002

がでてきます。

実際にメニューを作成

管理画面のメニューを選択するとこの画面。

20150305_003

作成するメニュー名を入力して”メニューを作成ボタン”をポチ。

20150305_004

追加するページを選択して

20150305_005

保存!

実際に表示するには

せっかく保存したのにこのままでは表示できない。
表示する場所に

20150305_006

を追加。
今回はグローバルナビなので”header.php”に追加。
このままでは、見た目がイマイチなのでCSSをいじってデザインをある程度整える。

20150305_007

本を見たり、ネットで検索したりでこんな感じになりました。

実際の表示

実際に見てみるとこうなります!

20150305_008

もう少しデザインをなんとかしたい。
・・・ちょこちょこデザインを勉強してなおしてこうと思います。

まずは、携帯で表示すると

20150305_009

こんな感じになってしまうので、メニューが中心によってしまうのを直そうと思います。

まとめ

ちょっとした事ですが、すごい時間がかかった。
こうなってくると、標準のテーマを使ったほうが楽だなと感じました。

あと思ったのが、この書き方だと「このメモ帳に何かあって復旧するときに、いろいろ大変そうだな・・・」って事です。

実際に技術系を書く時はもっと詳細に書くメモがあったほうがいいな・・・
ってんで、せっかくグローバルメニューもできたので専用のページをそのうち作ろうと思います。

理想としては、ほぼコピペでサイトをいじれるように作ろうと思います。

関連記事

  1. [甘]たったこれだけ?!サイトに「Google マップ」を埋め込…

  2. [甘]Macで『画像を結合したい!』って時にプレビュー機能を使っ…

  3. [甘]Mac のショートカットキーが「あれ?」ってなるからメモ!…

  4. [甘]ブログに関連記事を追加しようと思って「WordPress …

  5. 知ってました?Macで簡単に画像を透過処理する方法!

  6. WordPressで<div>の様なHTMLタグを表…

こんなメモもありますよ♪

Twitter

ページ上部へ戻る