WordPress サイトのフロントページにしている固定ページを動的に取得したい

WordPressで企業サイトなどを作っている時に固定ページをフロントページ(サイトトップ)に設定する事も多いと思います。
かなりレアケースな気もしますが、フロントページに設定しているページオブジェクトやページIDが必要になるテーマを作成する時のメモ。

固定ページを決め打ちで変更しない場合

他のページでフロントページに紐づく情報が取りたい時に、フロントページが決まっていて変更がないのであれば、get_page_by_path()を使ってフロントページに指定されているページオブジェクトを取得することができます。
例えば、/homeでアクセスできる固定ページをフロントページにしている場合は下記で取得することができます。

<?php
$frontPageObj = get_page_by_path('home');

下記では取得できない。

<?php
$frontPage = get_page_by_path('/'); // => null
$frontPage = get_page_by_path( home_url() ); // => null

get_page_by_path()関数は / や home_url() といったサイトのトップのURLを引数にしても、null になってしまいます。
なので、ページのスラッグを固定値で指定しなければならず、フロントページにする固定ページを変更すると、その都度get_page_by_path()関数に渡すスラッグを変更する必要があるので、フロントページが変更される可能性があると少し面倒です。

get_option()でフロントページのページIDを取得できる

get_option( 'page_on_front' ): returns the ID of the static page assigned to the front page
is_home() | Function | WordPress Developer Resources

get_option( 'page_on_front' ) でフロントページに設定してあるページのIDを取得することが出来るので、下記のコードでフロントページのページオブジェクトを取得することができます。

<?php
$pageID = get_option( 'page_on_front' );
$frontPage = get_post( $pageID );

この方法ならフロントページが変更になっても、変更したページを取得することが可能です。

get_option()で投稿ページに指定しているページIDも取得できる

引数をpage_for_postsにすれば、投稿ページ(home)に指定しているページIDも取得することができます。

<?php
$homeID = get_option( 'page_for_posts' );
$homePage = get_post( $homeID );

　
久しぶりにWordPress案件をしてたので、ページを取得する関数だったget_page()は廃止されて、投稿もページもget_post()で取得できるようになってたの今更を知りましたw

---

[参考]

• is_home() | Function | WordPress Developer Resources
• wp query - How to get post id of static front page? - WordPress Development Stack Exchange
• get_page_by_path() | Function | WordPress Developer Resources
• get_post() | Function | WordPress Developer Resources

小さなお店&会社の WordPress超入門 ―初めてでも安心! 思いどおりのホームページを作ろう!

Node.js nvmからnodebrewに乗り換えるぞい！

Node.jsのバージョンをv6.9.2に上げるにあたって、npmでグローバルにインストールしたパッケージを移行できるコマンドがあるということだったので、Node.jsのバージョン管理をnvmからnodebrewに乗り換えるました。npmのパッケージ結構容量を取るので...

nvmをアンイントールする

$ npm cache clean
$ rm -rf $NVM_DIR ~/.npm ~/.bower

~/.bashrcや~/.bash_profileに書かれているnvm関連のパスを削除

# 下記の記述を削除
source ~/.nvm/nvm.sh
npm_dir=${NVM_PATH}_modules
export NODE_PATH=$npm_dir

homebrewでインストールしたnodeを削除

かなり昔にhomebrewでインストールしたnodeが残っていたので、これもアンインストールしてしまいます。

npmを削除

$ npm cache clean
$ cd /usr/local/lib
$ sudo npm uninstall npm
$ rm -rf /usr/local/bin/npm

homebrewでインストールされているnode.jsを削除

$ sudo brew uninstall node

~/.bashrcや~/.bash_profileに書かれているhomebrewのnpmのパスを削除

# 下記の記述を削除
export PATH="/usr/local/share/npm/bin:$PATH"

nodebrewをインストール

１. インストール

$ curl -L git.io/nodebrew | perl - setup

２. nodebrewのパスを追加
~/.bashrcや~/.zshrcに下記を記述して保存する

export PATH=$HOME/.nodebrew/current/bin:$PATH

３. 追加したパスを反映

$ source ~/.bashrc

nodebrewでNode.jsをインストール

nodebrewの0.6.0をリリースしました。install-binaryというコマンドを追加しまして、コンパイル済みのバイナリからインストールできるようにしました。
nodebrewでバイナリからインストールできるようにした

install-binaryコマンドでコンパイル済みのnodeをダウンロードします。

$ nodebrew install-binary v6.9.2

※ 通常のinstallコマンドでインストールすると、ダウンロードしてからコンパイルするので少し時間がかかってしまいます。

$ nodebrew install v6.9.2

使用するNode.jsのバージョンとデフォルトのバージョンを指定

# 使用するバージョン
$ nodebrew use v6.9.2
# デフォルトで使用するバージョン
$ nodebrew alias default v6.9.2

インストールの確認

別途ターミナルを起動して、nodeのバージョンを確認

$ node -v
v6.9.2

指定したバージョンが表示されていればOK。
別のバージョンが表示される場合は、nodebrewのパスが通ってなかったり、他のnodeのパスなどが残っている可能性が高いので$ which nodeでnodeのパスを調べたり、~/.bashrcや~/.bash_profileの記述を再チェックしてみると良いと思います。

globalにインストールしたnpmのパッケージの移行

nodebrewではmigrate-package <version>コマンドで<version>のglobalにインストールされたパッケージの移行ができる。

# Install global NPM packages contained in <version> to current version
$ nodebrew migrate-package <version>

<version>は移行元を指定する。

ex: v5.9.0 にインストールしたパッケージを現在のバージョンに移行する場合

$ nodebrew migrate-package v5.9.0

---

[参考]

• GitHub - hokaccha/nodebrew: Node.js version manager
• nvmからnodebrewに乗り換えました - rochefort's blog
• How to uninstall nvm? · Issue #298 · creationix/nvm · GitHub
• node.jsの管理をhomebrewからnodebrewに変えて、npmをインストール
• node.js - Should I backup the ".npm" and ".node-gyp" folder? - Stack Overflow
• nvm, npm, Node.js関係をアップデートするぞぃ - かもメモ

Node.jsビギナーズガイド: サーバーサイドJavaScriptをマスターせよ！ PRIMERシリーズ (libroブックス)

WordPress ContactForm7 フォーム送信時に送信確認のチェックをリセットしたい

ContactForm7は送信前の確認したかのチェックボックスを設置することができます。
ただ、フォームを送信した後、エラーの有無にかかわらず送信確認がチェックされたままで、送信ボタンを押すことができる状態になったままになっています。
そこで、ContactForm7で用意されているtriggerのイベントを利用して、フォーム送信後に送信確認のチェックを外して送信ボタンをdisabledに戻すようにしてみました。

triggerを利用するので、サイトで使ってあるテーマのjsファイルなどに記述すればOKです。
利用するイベントについては、WordPress ContactForm7 フォーム送信時に任意のjsを実行したい。 - かもメモ を参照ください。

$(function() {
  var $form = $('.wpcf7-form');

  var onRresetAcceptance = function(evt) {
    var $form = evt.data.form,
        $submit = $form.find('input:submit');

    if( !$submit.length ) {
      return;
    }

    $form.find('input:checkbox.wpcf7-acceptance').each(function(i, elm) {
      var $acceptance = $(elm),
          is_invert = $acceptance.hasClass('wpcf7-invert'),
          is_checked = $acceptance.prop('checked');
      if( (is_invert && !is_checked)
       || (!is_invert && is_checked) ) {
          $acceptance.prop('checked', !is_checked).trigger('change');
          $submit.prop('disabled', true);
       }
    });
  };

  if( $form.length ) {
    $(document).on('wpcf7:submit', {form: $form}, onRresetAcceptance);
  }
});

フォーム送信時になぜか、submit.wpcf7が二回呼ばれてしまっているのですが、この様な感じでフォーム送信時に送信確認をリセットして送信ボタンをdisabledにする事ができました。

---

[参考]

いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方 第2版 WordPress 4.x対応 (「いちばんやさしい教本」シリーズ)