wordpressのテーマ作り

WordPressにページ内ナビゲーションをつけた~jQuery

投稿日:

 

 

 

MediaWikiとかTwitterBootstrap2.1.0に新しくついたやつとかそんなイメージ

仕組みとしては投稿の<h2>要素を集めてきてリストにすると同時に<h2>の後にidつきの<div>要素をくっつけてアンカーリンクしてるだけ

ただし、<h2>がある投稿でしか出てこない

例えば、次の記事ではナビゲーションがついた

PDFの全文検索環境を整える4〜hyper estraierのcgiを使ってみる

Redmineの最初のプロジェクトは「Redmineを導入すること」にしたらどうか

作った経過は次の通り

固定するナビゲーションを<div>でつくる

参考

「このページの先頭へ」を実装する (全4回) @ ドットインストール

ナビゲーションを表示するのは単体記事なのでsingle.phpにナビゲーションの場所をつくる

<li>はダミーで

cssで適当に雰囲気をだす 半透明の方がいいかな かぶってもみやすいように黒地に白字にした

デザインの問題だと思うんだけど最初から本文とかぶっているとみにくいのでナビゲーションの置き場をダミーで作ることにした

 

jQueryでアンカーリンク用の<div>を連番で追加する

jQueryで<h2>要素の後ろにアンカーリンク用の<div>を追加する。

アンカーリンクなら<h2>にidつけておけばいいと思えるけど、アンカーリンクだとリンク先がブラウザの左上になってしまうから、トップメニューを固定にしていると<h2>が見えなくてちょっとスクロールしすぎた状態になる。

そこでいろいろググった結果、後ろに<div>要素をくっつけて、この<div>要素のpadding要素で下にコントロールをずらせばいいってことがわかった。レイアウトが崩れないように、その分、marginをマイナスして調整する。

cssはこんな感じで

 

<h2>要素を抜き出してリストにする

連番でリンク先のidを付加しないといけないから、eachループのなかで次の処理をする

ここまででこんなイメージ 緑の部分はダミースペースを表示してある

記事に<h2>要素がない場合は表示しない

記事に<h2>要素がない場合は空のナビが表示されてしまうので<h2>要素がないときは表示しないようにした

 

そのほかの修正

1 <h2>要素に自動で連番

ほんとにどうでもいいことだけど、わたしは記事でh2要素に連番を振っていたので、<ol>でリストを抜き出すと連番部分がかぶってしまう

htmlって構造化文書用の言語なのになんでh2要素に自動で連番を付けられないんだ?っていうのが不思議に思える

<ol>のほうの修飾を消したり、いろいろやりかたはあると思ったけど、h2要素に手動で連番つけているのを修正すべきと思ってしまったので、今後は記事内のh2要素に自動で連番がつくように設定した

mediawikiにはこの機能があるんだけど、もしかして自分のやりたいことはWordPressじゃなくてwikiだったんじゃないのかと思いはじめたorz

 

 

2 z-indexを設定

なぜか、シンタックスハイライトとナビゲーターでシンタックスハイライトのほうが前に出てきてしまうので、z-indexを10000くらいに設定してナビを一番前にした。

 

課題

  • ナビの大きさが決め打ち
  • ナビの場所が決め打ち
  • <h3>も再帰処理したい
  • 途中までスクロールに追随して上にくっついたらスクロールを止めたい
  • メニューの横にはアイキャッチをいれるようにしていきたい
  • scrollToプラグインの使い方がわからない
  • ダミーを作って仮想環境で試して本番環境に移行したんだけど、本番環境で微妙な修正をしたいと思ったとき、仮想環境でテスト、本番環境に移行っていうのが面倒くさすぎる capistranoみたいなことができないかな?gitリポジトリを作ればいいのかな?
  • しばらく悦に入っていたがだんだんうざったくなってきた、×ボタンをつけて一旦消去。右あたりに小さくナビゲーションを表示ボタンを同じように固定で作成、そしてかっこいいアニメーション、、、という機能を作成したい
  • ナビゲーションが印刷されない@firefox なんでだ?
  • chromeではナンバリングのスクリプトが動いてない

目次みたいに<h2>要素を抜き出してみて自分のタイトルセンスがいまいちと気づいたorz

今後は目次を見て内容がわかるようにしたい

あとはパンくずリストを作りたいんだけど、上のメニューをみてわかるように情報の粒度もバラバラでまだ整理の仕方の方針が立ってない

-wordpressのテーマ作り
-,

執筆者:

関連記事

div要素全体をクリッカブルにしてリンクする~CSS

By: James Lee   WordPressのテーマを少しいじった ブロック要素の全体をリンク領域に設定する なにか別のもっと簡単な方法がCSS3であった気もするけど、とりあえず動いて …

no image

WordPressの検索窓に予測機能をつける~typeahead

Twitter BootstrapのJavascriptプラグインには検索フォームに予測機能をつけるtypeaheadというプラグインがあるので導入できるか試してみた。 1 searchform.ph …

Stinger3でWordPressのテーマつくった

By: The National Guard – CC BY 2.0 目次1 Stinger3ってどんなテーマ?2 子テーマをつくる3 ヘッダー画像を変える4 トップページを変える5 h2 …

WordPressのテーマ変更したら軽くなった~自作テーマ

ブログがいつの間にか遅くなっていた。気づいたら3秒台。 もろもろ考えたあげく勉強も兼ねて簡単なWordpressのテーマを作ってみることにした。 参考 テーマの作成方針 テーマをつくるための方針はつぎ …

Stinger5でWordPressブログのテーマを変更した

By: Mikhail Kamarov – CC BY 2.0 目次1 Stinger52 子テーマをつくる3 ヘッダー画像4 ファビコン変更5 日本語URLを使えるように6 適当に色など …