ShiftNav プラグインでスマホ用メニューを作る

背景

WordPressでレスポンシブル(画面のサイズによって表示を変更する)サイトを作っている際、問題になるのがスマホの画面でのメニュー表示です。
テーマによってはメニューが表示されるものもありますが、中には画面の一番下までスクロールしないと過去の記事を読めないものがあります。

そんなときに、ShiftNavというプラグインを見つけました。
こちらは、インストールするだけでタイトルバーと左上におなじみのハンバーガーメニュー(最近、ユーザフレンドリーでないと話題になっていますが…)が表示されます。

左が導入前、右が導入後。

メニューを開く。

カスタマイズ

さて、このプラグインの良いところはカスタマイズができるところです。 ダッシュボード > 外観 > ShiftNav から設定を変更することができます。
僕の場合は、タイトルバーは不要と思ったので、 Toggle Bar タブの「Hamburger button only」にチェックを入れ、「Toggle Breakpoint(画面の横幅が何pxを下回ったら ShiftNavを表示するか)」 を710px に設定しました。

エンジニア向けwordpressのgit管理方法

Webサイト用のライブラリであるwordpressにて、Webページのレイアウトやデザイン変更をする際、wordpressのphpファイルの変更は避けられません。

しかし、ftp経由でいちいち変更したいファイルをダウンロード・アップロードするのは不便です。また、編集したらwordpressが動かなくなった……
なんてことは避けたいですよね。

そこで、僕は以下のようなgitでの管理方法にしています。

初回

  1. レンタルサーバーのWebDAV (httpを用いてサーバーとファイルをやりとりを行う仕組み) を用いて、mac の Finder に接続 (Finder で cmd + K を入力)
    accessserver_2016-07-10-23-21-43

  2. サーバにアップロードされているwordpress関連のフォルダをダウンロード(記事が記録されているsqlのデータもダウンロードしても良いかもしれません)
    webdav_2016-07-10-23-22-05

  3. git init して、gitで管理(.gitignoreの編集を忘れずに)

2回目以降

  1. レンタルサーバーのWebDAV (httpを用いてサーバーとファイルをやりとりを行う仕組み) を用いて、macのfinderに接続
  2. phpのコードなどを書き換える
  3. git commit して、ソースコードのバージョンを管理
  4. 下記のようなrsyncスクリプトを用意して、レンタルサーバーのWebDAVと同期

rsync は mac の home-brew というパッケージ管理ソフトでインストールした rsync 3.1.2 を用いているため、日本語を正しくエンコードする iconv オプションが使えます(mac デフォルトでは使えないので注意!)

rsync の注意点とすれば、 rsync と打ち込むのですが、 のディレクトリのパスが ~/hoge と ~/hoge/ ではコピーされる中身が異なることです。
rsyncでディレクトリの同期

参考

git での管理の方法を学習するなら ドットインストールのgit入門がオススメです。
管理するレポジトリは gitHubbitbucket が無料で使えてオススメです。