Web Design Leaves

コードなどを記述する pre 要素の overflow を auto にしている時、1行の文字数が多い場合マウスオーバーすると幅が自動的に広がるようにする。 このサイト（例）の場合、google-code-prettify を使ってコードの記述部分をシンタックスハイライトするようにしていて、行番号を表示する場合は、番号リスト（ol）で出力され、そうでない場合…

続きを読む

WordPress でカテゴリーのリストを出力するには、wp_list_categories() を使って簡単に出力できるが、除外するカテゴリーは ID で指定しなければならなかったり、li 要素の前に画像を出力することができなかったりと微調整が難しい。また、毎回「get_categories()」を使って記述するのも面倒くさい。 そこで自前でリストを出力す…

続きを読む

テーマのテンプレートは、wp-content/themes/themeに置かれているが、ブログで表示される場合は、wp-contentと同じ階層にある、index.phpとして表示される。 このため、相対パスで記述するとリンク切れが発生してしまう。 以下のように jQuery で記述した場合、画像は表示されない。 フルパスで記述すると、画像は表示されるように…

続きを読む

次のような場合、画像の大きさや、line-height の値によって、画像がうまく中央に位置しないことがある。 このような場合、outerHeight()を使って、画像を中央（垂直方向）に表示することができる。 この時、CSS は、画像要素の「position」を「absolute」にして、その親要素の li 要素の「position」を「relative」…

続きを読む

WordPress で wp_list_categories()で出力したリストに CSS で背景画像を設定して、マウスオーバーしたときに表示するようにする。 CSSは jQuery でまず、「background」を「none」にしておく。 マウスオーバーしたら、背景画像を指定して、マウスアウトしたら、「background」を「none」にする。 Wor…

続きを読む

プラグインを使わずに、パンくずリストを出力する方法。 以下のサイトにとても丁寧でわかりやすい解説があったので、それを元にカスタム投稿タイプやカスタムタクソノミーにも対応するように、このサイト用に作成してみたもの。 「パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるかもしれない（Web Design Recipes）」 パラメータ…

続きを読む

管理画面の本文エリアで、テキストエディタで入力して pre タグ内にインデントをつけるためにタブを挿入しておいて、その後ビジュアルエディタに切り替えると、インデントの空白（スペースやタグ）が削除されてしまう。 これは、WordPressの自動整形機能によるものなので、取り合えずよい方法が見つかるまでは、ビジュアルエディタを使用しないようにするために、以下の方…

続きを読む

追加情報 WordPress 4.2.3 から以下のショートコードの方法では、シンタックスハイライトがうまく表示されない場合があります。 これは、セキュリティの問題で wp-includes の中の shortcodes.php が大幅に書き換えられたためです。 すでに以下の方法を使っている場合の暫定的な解決方法としては、shortcodes.php を W…

続きを読む

ブログなど特定部分だけをWordPress管理下とするようなサイトを構築する際、トップページに投稿の新着情報を表示するには WordPress の”wp-load.php”をインクルードする記述を追加する。 具体的には、 index.html を index.php にリネームして PHPを使えるようにする。 リネームした index…

続きを読む