トランスビットの開発ノート

Webサイト制作に役立つTipsやトラブルシューティングなどの備忘録

PHPでディレクトリを扱う

随分前に桜が散ったというのに、連日寒くて涙目のトランスビットの中の人です。
冬に底値で買ってきて、今満開を迎えている庭のビオラの花が、ナメクジの食害にあっています。
ゆ る せ な い !
奴らは夜行性で、日中は土の中に潜っているそうです。
そんなわけで、夜な夜な割り箸と酢のはいった容器を持って見つけ次第捕殺しているのですが、見つけるたびに「オオナメクジ が あらわれた! →たたかう」って感じでDQ2の戦闘を思い出します。
ナメクジを捕殺している私の姿が、道行く人々を驚かせていないことを願います。

さて、PHPではdirname()を使うと、ディレクトリ名がとれます。
一階層上のディレクトリ名を取得したい場合、さらにdirname()。もう一階層(ry

$dir = dirname( $_SERVER["REQUEST_URI"] ); // URIの最後のディレクトリ

$dir1 = dirname( $dir ); // 一階層上
$dir2 = dirname( $dir1 ); // 二階層上
$dir3 = dirname( $dir2 ); // 三階層上

地味に便利です。

Filed under: ,

Dreamweaverを捨てきれない理由

お陰様で、昨日子供が卒園しました。
幼稚園で使っていた制服だとか物だとかは半分以上片付けたのですが、捨てることができない物って意外とたくさんありますね。特に、絵なんかは親から見て微笑ましい物が多いので、月替わりで飾ろうかなーとか思って、クローゼットの上の方にしまっておきました。額買わないと……!(親馬鹿)

捨てきれないと言えば、Dreamweaver。
Dreamweaverは、私がSublime Text 2(今は3使ってますが)を使い始めるまでのメインエディタでした。使用暦は、12年くらいになるかも。
確か、cs4あたりからZen-Coding(後継はEmmet)を入れて使ってました。

さて、まずはDreamweaverの欠点から。

  1. 重い
  2. 落ちる

どっちも開発ツールとしては致命的。
保存時にエラー出して固まったりするので、洒落になりません。頻度も多すぎました。

次に、Dreamweaverの良いところ。

  1. プレビュー機能
  2. 強力なサイト管理機能(リンク保持や単体ファイルの検出、テンプレート機能)

プレビュー機能は、マルチディスプレイ環境ならブラウザを常に表示しておく領域が確保できるから要らないって人もいるでしょうが、そうでない場合、どのみちブラウザで確認するとはいえ、あったら便利です。

ただ、フォントサイズの指定にremを用いていると、デザインビューは崩壊としか言いようのない状態になります。
私がメインで使っていた最後のバージョンはCC無印で、ライブビューからの編集はできなかったし、あまり正確でないプレビュー(css3の対応がいまいち)だったので、ブラウザで確認とっていましたが、CC (2014)ではライブビューからの各種修正もできるようになっています。もちろん、css3の疑似セレクタもきちんと理解してくれます。

今ではWordpressの案件がほとんどなのと、それ以外の案件は数ページの小規模サイトが多いのであまり起動することもありませんが、静的ファイル全体のリンク構成を保ちつつ、特定ファイルを別階層に移動……みたいな作業が必要なときは、Dreamweaver一択です。きっと、替わりになるものはないんじゃないでしょうか。
これまでにたくさんのサイトをテンプレート機能を使って作ってきたので、それらサイトの修正にも必要……ということで、Dreamweaverは当分ランチャーの隅に居座りそうです。

Filed under:

WordPressのtime()はちょっと違う

3月って、やらないといけないことがたくさんありますね。確定申告は、3月頭に終わらすことができました。
毎年e-Taxサイトで申告データ作成しているのですが、今年はとある箇所の自動計算で引っかかってしまい、どうやっても自動計算の値がおかしいのでe-TaxサイトのサポセンにTELし、あーだこーだ状況説明。
30分くらい調べてもらって「上司と話してわかりました!」とかいう結論が……。

「今年はそういう仕様です。あとは所轄の税務署と相談してください」
ちょ、仕様とかwwそんなわけないやろwwwww

幸い、丸投げされた所轄の電話相談窓口の税理士さんはとっても親切な方だったし、e-taxソフトでの申告データ作成(紙申告に限りなく近い)で事なきを得ました。
……来年はちゃんとバグ潰しといてよね!(怒)

長い前振りでしたが、今日のテーマは仕様。
Advanced Custom Fields(以下ACF)のDate and Time Picker アドオンを使って、日付+時刻をカスタムフィールドで入力できるようにしました。
ACFのDatePickerの解説にある例(Query posts based on date)のように、現在日時より開始日時が早くて終了日時が遅い投稿を絞り込みたい場合、meta_queryを使って開始日時と終了日時それぞれを現在日時で比較し、andでくくって取ってくればいいわけです。
そこで、現在日時をdate_i18n(‘Y/m/d g:i a’);として絞り込もうとしたんですが、何も引っかからない。
データベースをのぞいてみたら、案の定、日時はACFから指定したフォーマットではなく、UNIXタイムスタンプ形式で格納されていました。
それならtime()使えばいいやと現在日時をtime()にするも、何も引っかからない……。
何が悪いのか全くわからず色々ググッていると、Codexでcurrent_time()とかいう関数のページを見つけました。
current_time(‘timestamp’) は、ブログのローカルタイムを受け取りたい場合に time() の代わりに使うとよい。WordPress では、PHP の time() は常に UTC 時刻を返す。これは、 current_time(‘timestamp’, true) を呼び出すのと同じ結果となる。
これ。これですよ。普通、こういうのを仕様って言うんですよね!!?

// $today = date_i18n('Y/m/d g:i a');  誤:データはUNIXタイムスタンプで格納されている
// $today = time();                    誤:current_time('timestamp', true)と同じで、 UTC 時刻を返す
$today = current_time('timestamp'); // 正:Wordpressではtime()の代わり

$args = array (
    'post_type' => 'post',
    'meta_query' => array(
		array(
	        'key'		=> 'start_datetime',
	        'compare'	=> '<=',
	        'value'		=> $today,
	    ),
	     array(
	        'key'		=> 'end_datetime',
	        'compare'	=> '>=',
	        'value'		=> $today,
	    )
    ),
);

今回もCodexのお陰で無事解決。
current_time(‘timestamp’)を使うことで、思い通りのqueryを得ることができました。

Filed under:

Custom Post Type UIとAdvanced Custom Fields

椿さんが終わったのに、なんで春がやってこないんでしょう……毎日寒い。
そう言えば、皆さん縁起物に買う順番があるって知ってました?
熊手で掻き集め、それをザルですくい、扇子で広げ、最後に俵にして積み上げるんだと、露店のおばちゃんが教えてくれました。
去年は知らなかったので、掻き集めた後、いきなり俵にしてましたwwwww

さて、最近使って便利だと思ったWordpressのプラグイン、そして必要に駆られてできたコードを書いてみます。

カスタム投稿タイプをとカスタムフィールドをプラグインで管理してみる

カスタム投稿タイプもカスタムフィールド(以下CF)も、function.phpに直接ゴリゴリ書いた方が使い回しやすくていいんじゃないのかと思っていたのですが、3つ以上カスタム投稿タイプが必要な案件では、流石に管理が面倒なのでCustom Post Type UIというプラグインを使ったりします。
いろんなサイトで紹介されているだけあって、本当に簡便極まりないですね。
ついでにCFもAdvanced Custom Fields(以下ACF)というプラグイン使ったりするようになりました。
これもまた、いろんな(ry

でもACFの場合、カスタムフィールドを含めた絞り込み検索を実装しようとすると、高確率で煮え湯を飲まされます。超危険!
なぜなら、チェックボックスのように複数値を配列で保存するものは、データがシリアライズされて保存されるため、meta_queryでINが使えないのです。LIKEを使ってもいいのですが、複雑な検索要件ならお手上げです。
ACFにこだわらず、配列をシリアライズせずに値をユニークに保存してくれる別のプラグイン(例えばSmart Custom Fields)などもあるので、大人しくそっちを使っとけば万事解決なわけですが、ユーザープロフィールへのCF配置ができるプラグインって、ACFくらいしか見かけません……。

そこで、よーく考えてみました。

要は、ACFでチェックボックスのCFを実現しようとするからいけないんです。
チェックボックスのCFは、function.phpにゴリゴリ書けばいいんです。

ということで、ユーザープロフィールにチェックボックスのCFを設置するコードの中で、個人的に一番悩んだ保存方法を覚書き。

// ユーザー情報追加項目(好物情報)の保存
add_action( 'edit_user_profile_update', 'update_extra_profile_fields' );
function update_extra_profile_fields( $user ) {
  $user_id = $_POST['user_id'];
  $food = $_POST['food'];

  if( !empty( $food ) ) {
    delete_user_meta( $user_id, 'food', '' ); // まずは全消し
    foreach ( $food as $foods )
      if( $foods != '' ){
        add_user_meta( $user_id, 'food', $foods, false );
      }
  } else {
    delete_user_meta( $user_id, 'food', '' );
  }
}

要は、値の個数分add_user_meta()してやればいいんですね。表示する場合も同じように、個数分get_user_meta()すればいいわけです。
今回もwordpressのCodecとフォーラムの過去ログにお世話になりました。
毎回質問してみようかと思うんだけど、答えの近似値って探せばある……ありがたいことです。

Filed under:

PackageResourceViewerでパッケージ内容を書き換える

忙しい時って不思議な行動を取ってしまいます。
役に立ちそうで何の役にも立たない、いわゆる現実逃避の話です。その現実逃避も、年を経る毎に変化してきました。

15年前 → PC重くて作業に支障でる、デフラグしよう!
10年前 → 標準使用だからダメなのかも、Extention探そう!
5年前 → くぁwせdrftgyふじこlp……zzz(育児疲れで寝落ち)
今 → まえやったあれ、ブログに書いとこう!

さて、先日の記事に出てきたSublime Text 3には、たくさんのパッケージがあります。
そのパッケージの中身をごにょごにょしたい時には、PackageResourceViewerを使うと良いらしいです。
私の場合、Japanizeで日本語してあるSublimeTextに、SideBarEnhancements入れてサイドバー拡張したら、サイドバーの表記が英語になっちゃって使いこなせなかったので、そこを日本語化するためだけにインストールしました。
ちなみに、Side Bar.sublime-settingの変更では効かなかったので、PackageResourceViewerからSideBarEnhancementsを開いて、Side Bar.sublime-textを下記に変更。
なんにもないだろうけど、なんかあったら嫌なので、もともとあった分はコメントアウトして下記を追加しました。ついでにドネーション部分も削ってしまいました。
SideBarEnhancementsの作者さん、ごめんなさい。

[
  {"caption":"-", "id":"side-bar-start-separator"},
  { "caption": "新規ファイル作成",        "id": "side-bar-new-file",         "command": "side_bar_new_file",         "args": {"paths": []} },
  { "caption": "新規フォルダ作成",       "id": "side-bar-new-directory",       "command": "side_bar_new_directory",       "args": {"paths": []} },
  { "caption": "-",                 "id": "side-bar-new-separator"},

  { "caption": "編集",              "id": "side-bar-edit",             "command": "side_bar_edit",             "args": {"paths": []} },
  { "caption": "開く / 実行",              "id": "side-bar-open",             "command": "side_bar_open",             "args": {"paths": []} },
  { "caption": "ブラウザで開く",              "id": "side-bar-open-in-browser",             "command": "side_bar_open_in_browser",             "args": {"paths": []} },
  { "caption": "新しいウィンドウで開く",              "id": "side-bar-open-in-new-window",             "command": "side_bar_open_in_new_window",             "args": {"paths": []} },
  { "caption": "Open With Finder",              "id": "side-bar-open-with-finde",             "command": "side_bar_open_with_finder",             "args": {"paths": []} },
  { "caption": "プログラムから開く",        "id": "side-bar-files-open-with",

    "children":
    [

      { "caption": "-",                  "id": "side-bar-files-open-with-edit-application-separator"},
      { "caption": "設定", "id": "side-bar-files-open-with-edit-applications", "command":"side_bar_files_open_with_edit_applications","args": {"paths": []} },
      { "caption": "-",                  "id": "side-bar-files-open-with-edit-applications-separator"}

    ]
  },
  { "caption": "フォルダを開く",            "id": "side-bar-reveal",           "command": "side_bar_reveal",           "args": {"paths": []} },

  { "caption": "-",                 "id": "side-bar-edit-open-separator" },

  { "caption": "ファイル内容の検索・置換", "id": "side-bar-find-selected",    "command": "side_bar_find_in_selected", "args": {"paths": []} },
  { "caption": "プロジェクト内の検索", "id": "side-bar-find-in-project",    "command": "side_bar_find_in_project", "args": {"paths": []} },
  { "caption": "詳細検索", "id": "side-bar-find-advanced",
    "children":
    [
      { "caption": "親フォルダ内",   "id": "side-bar-find-parent",      "command": "side_bar_find_in_parent",   "args": {"paths": []} },
      { "caption": "-",         "id": "side-bar-find-parent-separator"},
      { "caption": "このプロジェクトフォルダ内",  "id": "side-bar-find-project-folder",     "command": "side_bar_find_in_project_folder",   "args": {"paths": []} },
      { "caption": "全てのプロジェクトフォルダ内",  "id": "side-bar-find-project-folders",     "command": "side_bar_find_in_project_folders"},
      { "caption": "-",         "id": "side-bar-find-project-separator"},
      { "id": "side-bar-find-in-files-with-extension",     "command": "side_bar_find_in_files_with_extension",   "args": {"paths": []}},
      { "caption": "In Paths Containing…",   "id": "side-bar-find-files-path-containing",      "command": "side_bar_find_files_path_containing",   "args": {"paths": []} }

    ]
  },
  { "caption": "-",                 "id": "side-bar-find-separator"},
  { "caption": "切り取り",               "id": "side-bar-clip-cut",         "command": "side_bar_cut",              "args": {"paths": []} },
  { "caption": "コピー",              "id": "side-bar-clip-copy",        "command": "side_bar_copy",             "args": {"paths": []} },
  { "caption": "名前のコピー",         "id": "side-bar-clip-copy-name",                     "command": "side_bar_copy_name",                         "args": {"paths": []} },
  { "caption": "ファイルパスのコピー",         "id": "side-bar-clip-copy-path",    "command": "side_bar_copy_path_absolute_from_project_encoded",        "args": {"paths": []} },
  { "caption": "Copy Dir Path",     "id": "side-bar-clip-copy-dir-path",                     "command": "side_bar_copy_dir_path",                         "args": {"paths": []} },
  { "caption": "テキストとしてコピー",      "id": "side-bar-clip-copy-as",
    "children":
    [
      { "caption": "Relative Path From View Encoded",         "id": "side-bar-clip-copy-path-relative-from-view-encoded",    "command": "side_bar_copy_path_relative_from_view_encoded",        "args": {"paths": []} },
      { "caption": "閲覧地点からの相対パス",                 "id": "side-bar-clip-copy-path-relative-from-view",            "command": "side_bar_copy_path_relative_from_view",                "args": {"paths": []} },
      { "caption": "-",                                       "id": "side-bar-clip-copy-path-relative-from-view-separator"},

      { "caption": "Relative Path From Project Encoded",         "id": "side-bar-clip-copy-path-relative-from-project-encoded",    "command": "side_bar_copy_path_relative_from_project_encoded",        "args": {"paths": []} },
      { "caption": "プロジェクトからの相対パス",                 "id": "side-bar-clip-copy-path-relative-from-project",            "command": "side_bar_copy_path_relative_from_project",                "args": {"paths": []} },
      { "caption": "-",                                          "id": "side-bar-clip-copy-path-relative-from-project-separator"},

      { "caption": "Absolute Path From Project Encoded",         "id": "side-bar-clip-copy-path-absolute-from-project-encoded",    "command": "side_bar_copy_path_absolute_from_project_encoded",        "args": {"paths": []} },
      { "caption": "プロジェクトからの絶対パス",                 "id": "side-bar-clip-copy-path-absolute-from-project",            "command": "side_bar_copy_path_absolute_from_project",                "args": {"paths": []} },
      { "caption": "-",                                          "id": "side-bar-clip-copy-path-absolute-from-project-separator"},

      { "caption": "URIとしてのパス",                  "id": "side-bar-clip-copy-path-encoded",             "command": "side_bar_copy_path_encoded",                 "args": {"paths": []} },
      { "caption": "ファイルパス",                          "id": "side-bar-clip-copy-path",                     "command": "side_bar_copy_path",                         "args": {"paths": []} },
      { "caption": "-",                             "id": "side-bar-clip-copy-path-separator"},

      { "caption": "エンコードされた名前",                  "id": "side-bar-clip-copy-name-encoded",             "command": "side_bar_copy_name_encoded",                 "args": {"paths": []} },
      { "caption": "-",                             "id": "side-bar-clip-copy-name-encoded-separator"},

      { "caption": "URL",                           "id": "side-bar-clip-copy-url",             "command": "side_bar_copy_url",                 "args": {"paths": []} },
      { "caption": "-",                             "id": "side-bar-clip-copy-url-separator"},

      { "caption": "aタグを使用してコピー",                         "id": "side-bar-clip-copy-tag-a",                    "command": "side_bar_copy_tag_ahref",                  "args": {"paths": []} },
      { "caption": "imgタグを使用してコピー",                       "id": "side-bar-clip-copy-tag-img",                  "command": "side_bar_copy_tag_img",                    "args": {"paths": []} },
      { "caption": "scriptタグを使用してコピー",                    "id": "side-bar-clip-copy-tag-script",               "command": "side_bar_copy_tag_script",                 "args": {"paths": []} },
      { "caption": "スタイルシートのリンクタグとしてコピー",                     "id": "side-bar-clip-copy-tag-style",                "command": "side_bar_copy_tag_style",                  "args": {"paths": []} },
      { "caption": "-",                             "id": "side-bar-clip-copy-tag-separator"},
      { "caption": "プロジェクト全てのフォルダパスを一括コピー",               "id": "side-bar-clip-copy-project-directories",          "command": "side_bar_copy_project_directories",            "args": {"paths": []} },
      { "caption": "-",                             "id": "side-bar-clip-copy-project-directories-separator"},
      { "caption": "ファイル内テキストをUTF-8でコピー",               "id": "side-bar-clip-copy-content-utf8",             "command": "side_bar_copy_content_utf8",               "args": {"paths": []} },
      { "caption": "ファイル内容をデータURIとしてコピ―",           "id": "side-bar-clip-copy-content-base-64",          "command": "side_bar_copy_content_base64",             "args": {"paths": []} }
    ]
  },

  { "caption": "貼り付け",             "id": "side-bar-clip-paste",       "command": "side_bar_paste",            "args": {"paths": [], "in_parent":"False"} },
  { "caption": "親フォルダに貼り付け",   "id": "side-bar-clip-paste-in-parent",       "command": "side_bar_paste",            "args": {"paths": [], "in_parent":"True"} },
  { "caption": "-",                 "id": "side-bar-clip-separator" },
  { "caption": "名前を付けて複製",         "id": "side-bar-duplicate",        "command": "side_bar_duplicate",        "args": {"paths": []} },
  { "caption": "-",                 "id": "side-bar-duplicate-separator" },

  { "caption": "名前の変更",           "id": "side-bar-rename",           "command": "side_bar_rename",           "args": {"paths": []} },
  { "caption": "ファイルを移動する",             "id": "side-bar-move",             "command": "side_bar_move",             "args": {"paths": []} },
  { "caption": "-",                 "id": "side-bar-rename-move-separator" },

  { "caption": "削除",            "id": "side-bar-delete",           "command": "side_bar_delete",           "args": {"paths": []} },
  { "caption": "Empty",            "id": "side-bar-emptry",           "command": "side_bar_empty",           "args": {"paths": []} },
  { "caption": "-",                 "id": "side-bar-delete-separator" },

  { "caption": "フォルダを再読み込み",           "id": "side-bar-refresh",          "command": "refresh_folder_list" },
  { "caption": "-",                 "id": "side-bar-refresh-separator" },
  { "caption": "プロジェクト",            "id": "side-bar-project",
    "children":
    [
      { "caption": "プロジェクトの編集", "id": "side-bar-project-open-file",      "command": "side_bar_project_open_file",           "args": {"paths": []} },
      { "caption": "Edit Projects Preview URLs", "id": "side-bar-project-preview-url",      "command": "side_bar_project_open_project_preview_urls_file",           "args": {"paths": []} },
      { "caption": "-",                         "id": "side-bar-project-open-file-separator" },
      { "caption": "Promote as Project Folder", "id": "side-bar-project-item-add",     "command": "side_bar_project_item_add",        "args": {"paths": []} },
      { "caption": "Exclude From Project",      "id": "side-bar-project-item-exclude",   "command": "side_bar_project_item_exclude",        "args": {"paths": []} },
      { "caption": "-",                         "id": "side-bar-project-item-separator" },
      { "caption": "プロジェクトからフォルダを取り除く", "id": "side-bar-project-item-remove-folder", "command": "side_bar_project_item_remove_folder", "args": { "paths": []} },
      { "command": "prompt_add_folder", "caption": "Add Folder to Project…", "mnemonic": "d" }

    ]
  },
  { "caption": "-",                 "id": "side-bar-end-separator" }
 ]

これでよし!

Filed under:

Sublime Text 3(Compass+sass)のある暮らし

様々なサイトで絶賛されている高機能エディタ、Sublime Text。
恋に落ちるエディタってすごい二つ名だなと思いますが、嘘じゃありません。

遅ればせながら一年ほど前、疑心暗鬼でRubyをインストールし、初めてSassのSCSS記法を使ったcssを書き始めた一時間後……爆速コーディングとSublime Textの拡張性の高さと安定っぷり(作業中に落ちないってほんと重要!)に衝撃を受け、私も漏れなくSublime Textとの恋に落ちました。

ちなみに、それまでコーディングにはDreamweaverとサクラエディタを使用。
サクラエディタは10年ほど使いました。これ、インストールは圧縮ファイルの展開のみなので、レジストリ汚染しません。
昔、他所に出向いて作業することが多々あったため、インストールフォルダそのものをコピーしてUSBメモリに入れておけば、どこにいっても自分好みにカスタマイズしてある高性能エディタを使えるというのは、非常にありがたかったです。
でも、今はもう他所での作業もないし、Sublime Text 3があるのでアンインストール済み。今までありがとうノシ

Sublime Textの特徴

Sublime Textの良いところ

  1. 動作が軽い
  2. 挙動が安定している
  3. パッケージ(プラグイン)が豊富
  4. コンパイルも簡単
  5. 作業管理(プロジェクト)ができる
  6. 前回開いていたプロジェクトとファイルを覚えてくれてるから、次回作業開始がスムーズ
  7. 使用制限がなく無料で使える

Sublime Textのイマイチなところ

  1. プレビュー機能がなく、プレビューから修正ができない
  2. sassの記述が増えてくると、Compassのコンパイルが遅い

本当は、Sublime TextとChromeにEmmet Live Styleを入れると、デベロッパーツールからcssの修正がDreamweaverライクにできるのですが、私はSassを使ってcss書いているので、直接Sassを修正できないと意味がありません。デベロッパーツールのベータ版使えばSassに対応可能とかそんな感じの記事を見て試したものの、どうにもうまくいかなかったので再挑戦予定です。

後は、Compassのコンパイルが遅いのをどうにかしたい……といっても、三分の一くらいは私のsassの書き方が悪いせいかも。
Sassを使い出してから、ネストでのセレクタ指定にやたら頼るようになり、cssが不細工になってきてます。
IE7やIE8への対応案件が減ってcss3で疑似クラスが使用可能になり、レスポンシブの案件が増え、スマホの時は~とか、タブレットではこうだから~とか考えながら書いてると、classの命名にまで頭が回らず、「あーも-、ここは取りあえずセレクタをネストして書いとくか」と、楽な方楽な方に流れていった結果ですね。
……コーディングのみの案件も出てきたし、今後はBEMっぽい命名規則を意識しようと思います。

ちなみに、BEMについてはこの二つの記事がとっても参考になり、且つしっくりきました。
実践 めんどうくさくない BEM
CSSをキレイに書くを追求すると行き着く「OOCSS」、「BEM」

コンパイルにCompassじゃなくてGruntを使う方法があるらしいので、そっちも試さないと……。

Filed under:

ファイル名を取得して現在地表示

拡張子付、拡張子なし、ファイル名取得用の変数はどっちも便利。
私の場合、現在地表示に使うことがほとんどです。
トランスビットの外の人のデザインにもよりますが、親カテゴリに対して現在地表示をするものの場合、[ 親カテゴリ名_hoge.html ]のように、親の名を子に継承した形でファイル名付けておけば、あとは条件文をちょっと変えてやるだけでOK。

var url = window.location.href;
var filename = url.match(".+/(.+?)([\?#;].*)?$")[1]; // 拡張子付
var filename_only = url.match(".+/(.+?)\.[a-z]+([\?#;].*)?$")[1]; // 拡張子なし

//リスト形式のナビゲーションに現在地表示のためのclassを付与
  $('nav li a').each(function() {
    var $href = $(this).attr('href');
    if ($href.match(filename)) {
      $(this).parent().addClass("current"); // liに付与
    }
  });

なんで最近、現在地表示用のscript書いたり書かなかったりするんやろ……と、よくよく考えてみたら、Wordpress案件の時は、端から付与されているclassを利用したり、phpで処理してしまうからなんですね。得心しました。

Filed under:

WordPressのカスタマイズ時に便利なvar_dump()

はじめまして、トランスビットの中の人です。

トランスビットのサイトリニューアルから、早半年以上・・・。
この開発ノートのページデザインは随分前(多分リニューアル後一週間以内w)に外の人が上げていたようですが、忙しさにかまけて作るのをほったらかしにしてたら、今日の昼食後、トランスビットの外の人に諌められました。

外)「そろそろ、ウチのサイトのブログ仕上げて書き始めて」
中)「なんで?やっぱブログ書いとくと『サイトに箔が付くっ!』とか?」
外)「……『前どうやったっけ?』ってことがなくなるやろ」

……ついに、「忘れた」とか「覚えてない」とかの言い訳が使えなくなるようです。むごい。
とりあえずデザインの再現ができた気がするので、テスト投稿でない一発目の記事を投稿してみます。

PHPの関数 var_dump()

説明:この関数は、指定した式に関してその型や値を含む構造化された情報を 返します。配列の場合、その構造を表示するために各値について再帰的に 探索されます。
PHP 5 では、オブジェクトのすべての public、private および protected なプロパティが出力されます。

WordPressのカスタマイズで、queryで取れているデータの詳細な内容を知りたい時、<pre>タグを使って確認すると、改行が入って便利。
カテゴリ名やら親子関係やら取れたデータの総数やら、色々なことがわかります。
$argsについては省略。

<?php $the_query = new WP_Query($args); ?>
<pre>
<?php var_dump( $the_query ); ?>
</pre>

これで、『……前どうやったっけ?ってことがなくなる』ハズ。

Filed under:

一番使える、アイコン系webフォントのサイト

このサイトでも使っている、アイコン系webフォント。
色々ある中で、一番使い勝手が良さそうだと思ったのはFont Awesome
Wordpressにも「Font Awesome Icons」というプラグインがあるし、文字だから大きさは自由自在、マウスオーバー時に色もつけれる。どんどん普及しつつあるRetinaディスプレイで見てもきれいだし、何より軽い。
これはメチャクチャ便利。

ただ問題もあって、異なるアイコンをずらっと並べてみると、フォントサイズは一緒なのにそれぞれの大きさがまちまち。
これはアイコン系webフォントの宿命……仕方ないから潔く諦めたいところですが、トランスビットの外の人が許してくれないことも分かっています。
イラレでちまちまSVGファイル作って、まとめてwebフォントに変換してくれるサイトに行くのが最適解なのカシラ…と思ってたのです、が。

IcoMoonにありました。
Font Awesome、入ってました!

IcoMoonは、IcoMoonに登録済みのフォントなら、自分で一文字一文字簡単なカスタムができるし、自作のSVGもwebフォンとして変換可能。さらに使用するものだけを選択してダウンロードができるという、至れり尽くせりのサイトです。これでデザインが保たれ、トランスビットの外の人も大満足。
そのうち、サイトロゴもフォントとして登録してみようと思います。

Filed under:

さくらのライトプランでSQLite+WordPress

通常、WordPressではMySQLを使うけど、MySQLが使えないサーバ……例えば、さくらインターネットのライトプランなら、SQLiteでのWordpress導入が可能。

必要なのは、最新版のWordPress本体(投稿時は3.9.1)と 、プラグインの SQLite Integrationのみ。SQLite Integration配布サイトではインストール方法の詳しい説明もあるので、あっという間にWordPressのインスコ終了。

実は、SQLite Integrationの他に、PDO for WordPressというプラグインもあるけど、最後にバージョンアップされたのは2年以上前。2年以上前というと、WordPress2.9.2辺り(!)なので、鮮度の良いSQLite Integrationを使うようにする。(ちなみに両方試してみたけど、SQLite Integrationを使ってインストール作業する方が、体感としては速かった。)

インスコはできた。
だがしかし、このままではサイト管理どころか閲覧すら重くて、とてもじゃないが使い物にならない。MySQLが一気に恋しくなる瞬間。
ということで、以下導入してみたプラグイン。これで快適~。
ただ、キャッシュが効き過ぎてスーパーリロードすらままならない時があるので、テーマの編集をしたりした場合は、一度プラグインを無効にすると吉。
—————————————-
■キャッシュ系

  • Quick Cache
  • MO Cache
  • WP Hyper Response
  • WP File Cache

■画像系

  • Lazy Load //遅延読み込み
  • EWWW Image Optimizer //画像圧縮・リサイズ

————————————

Filed under: