WordPress メルマガ用ランダム記事一覧

TypeError: $ is not a function エラー:WordPress サイトでは Firebug のコンソールで $ 使った jQuery のコードが動かなかった:解決

WordPress メディアを追加する場合の添付ファイルの表示設定のリンク先のデフォルトを変更したい

[WordPress] ややこしい違い(home_url と site_url)

[Windows] .htaccess が作れない(「ファイル名を入力してください」)

WordPress の Contact Form 7 プラグインでスパム回避のために CAPTCHA を表示させてみた

[WordPress] 子テーマを利用している場合は get_template_directory_uri() ではなく get_stylesheet_directory_uri()

XREAで WordPress に Jetpack をインストールした際、「fopen() のハンドラーを開くことができませんでした」エラーが表示された:解決


TypeError: $ is not a function エラー:WordPress サイトでは Firebug のコンソールで $ 使った jQuery のコードが動かなかった:解決

問題

Firefox の Firebug のコンソールで、WordPress で作られたサイトの JavaScript を検証をするために jQuery の $ を使おうとしたら、「TypeError: $ is not a function」が表示されてしまいました。

「$」が定義されていないと言う事ですが、jQuery は読み込まれています。

原因

実は、WordPress では jQuery と、プラグインなどが独自に読み込んだ JavaScript がコンフリクトしないように「$の別名定義」が行われています。

つまり、「$」ではなく「jQuery」が使われています。

解決方法

早い話が「$」の代わりに「jQuery」を使えば OK です。

HTML はこれ

<input type="email" id="email" value="hoge@example.com" />

Firebug のコンソールでの動き

WordPress上のjQuery

この例では、id に email を指定した input タグの値が、確かに「jQuery(‘#email’).val()」で取得できていることがわかります。

まとめ

Firefox 上で JavaScript のデバッグに Firebug を使っている方は多いと思うのですが、$ が使えない理由が WordPress と言うところで引っかかる方も多いのかと思います(自分もでしたが・・)。

わかれば簡単な事なんですけどね。

WordPress メディアを追加する場合の添付ファイルの表示設定のリンク先のデフォルトを変更したい

WordPressの投稿内で画像をプラグインを利用して、見やすくする場合があります。
代表的なプラグインは Lightbox しかし、プラグインを導入しただけでは、起動しない場合があります。

理由は、投稿でメディアを追加する際に、リンク先をメディアファイルにしていない為にそのような現象が発生します。
その為に、デフォルトでメディアファイルにしてしまう方法を紹介します。

添付ファイルの表示設定のリンク先

スクリーンショット_092714_031620_PM
ここのリンク先をメディアファイルがデフォルトになるように変更する

変更方法

オプションを変更する。
自サイトの以下のURLにアクセスをする

http://www.自分のサイト.com/wp-admin/options.php

オプションの設定変更画面が表示されます。
スクリーンショット_092714_031751_PM

image_default_link_typeの値を変更して保存ボタンをクリック

設定する値は以下の通り。

custom — カスタム URL
file — メディアファイル
post — 添付ファイルのページ
none — なし

[WordPress] ややこしい違い(home_url と site_url)

WordPressでPHPを記述できる人は、プラグインのURLを記述したり、画像のURLを記述したりするのに「home_url()」「site_url()」を利用したりすると思います。
良く勘違いしたり、そもそも日本語版だと表現がややこしいので注意しましょう。

WordPressの設定画面の項目で説明します。

  1. サイトのアドレス(URL)
    [設定]-[一般]のこの部分です。
    wpset002
    こっちが「home_url()」です!

    <?php echo home_url(); ?>
    
  2. WordPressのアドレス(URL)
    [設定]-[一般]のこの部分です。
    wpset001
    こっちが「site_url()」です!

    <?php echo site_url(); ?>
    

「サイトアドレス」!=「site_url()」なので気を付けましょう。

[Windows] .htaccess が作れない(「ファイル名を入力してください」)

Windowsではドットで始まるファイル名に変更できません。
こんなエラー(「ファイル名を入力してください」)が表示されます。
rename_error

でも、レンタルサーバーなどに「.htaccess」をアップロードしたいケースは少なくありません。

その場合の対処方法(2種類)です。

  1. 既に持っているファイルをコピーしたり、FTPでダウンロードする
    この方法が手っ取り早く確実です。
    既に動いていたファイルなら、記載内容もそのまま使えたりしますので、トラブルも少ないです。
  2. [rename]コマンドを使って、ファイル名を変更する
    上記のように何もファイルが無い時に知っていると便利です。

    >rename 作ったファイル.txt .htaccess
    

    但し、新しくファイルを作るわけですから、文字コードや改行コードを注意してください。
    ファイルの内容に不備がある場合はファイルを配置した配下の何にアクセスしても「500 Internal Server Error」になります。

WordPress の Contact Form 7 プラグインでスパム回避のために CAPTCHA を表示させてみた

プロが教える WordPress セミナー開催中!

背景

Contact Form 7 で作られている問い合わせフォームへのボットによるスパムが増えている弊社の管理サイトがあ、対処方法を検討する必要がありました。

対処方法

ボットへの対処方法としては、CAPTCHA (キャプチャ)、つまり画像を表示してその内容の入力を必要とすると言う人間でないと分かりづらい入力項目を作ると言う方法を取りました。

キャプチャの入力項目とは、この様なものですね。
wordpress_cf7_captcha

利用方法

Contact Form 7 は CAPTCHA との連携機能を持っています。
ただし、Really Simple CAPTCHA と言うプラグインを別途必要としますので、あらかじめプラグインメニューから追加しておきましょう。

これらをフォームのタグに指定していきます。

  1. WordPress の「お問い合わせ|コンタクトフォーム」メニューから、編集したいフォームを選択します。
  2. フォームのタグに、オプションを追記します。
    例)

    ■キャプチャ(必須):
    [captchac captcha size:m]
    次のテキストボックスに、画像に書かれた文字を入力してください。
    [captchar captcha]
    

この例では、キャプチャの画像を表示するショートコードとして「[captchac captcha]」を、
キャプチャの入力を行うテキストボックスを表示するショートコードとして「[captchar captcha]」を指定しています。

「[captchac]」と「[captchar]」とで指定する名前「captchar」は必ず一致させる必要があります。
他の Contact Form 7 のタグと使い方は一緒ですね。

「[captchac captcha]」の「size:m」は画像サイズの指定です。

参考:本家の説明

まとめ

WordPress では複雑な CAPTCHA(キャプチャ) を用いるプラグインなども存在しますが、ボットによるメールスパム程度であれば、大部分が今回の記事の方法で防ぐことができると思います。

[WordPress] 子テーマを利用している場合は get_template_directory_uri() ではなく get_stylesheet_directory_uri()

wplogo

<

p style=”clear:both;”>

プラグインやテーマ、テンプレートを制作する際には注意して欲しい内容です。
カレントテーマの URI を取得する方法としてAPI関数の名前的にも「get_template_directory_uri()」を利用してしまいがちです。
ここで問題が生じます。子テーマを利用している場合は get_template_directory_uri()は親テーマのパスが取得されてしまいます。

最近ではテーマも日々バージョンしますので、子テーマを作成してカスタマイズするのが推奨されています。
子テーマのパスを取得したいなら、get_stylesheet_directory_uri() を使う必要があります。

  • 親テーマのパスを取得 → get_template_directory_uri()
  • 子テーマのパスを取得 → get_stylesheet_directory_uri()

WordPress Codex のドキュメント[get_template_directory_uri()]にも記載されています。

よくある落とし穴かと思いますので注意しましょう。

XREAで WordPress に Jetpack をインストールした際、「fopen() のハンドラーを開くことができませんでした」エラーが表示された:解決

WordPress に Jetpack をインストールした際、次のエラーが表示された場合の対処方法についてメモ。

「Jetpack は WordPress.com と接続できませんでした: register_http_request_failed これは通常、ホスティングサービス上の設定が何か間違っていることを意味しています。
https://jetpack.wordpress.com/jetpack.register/1/ に対する fopen() のハンドラーを開くことができませんでした。」

以前の記事 Xrea で WordPress に Jetpack を入れようとしたらエラー(Unknown SSL protocol error in connection to jetpack.wordpress.com:443)した:解決 をやっても上記エラーが出てしまった場合の対応方法です。

とは言っても、こうやったらできた、と言うレベルですが。

やり方

  1. WordPress Stats、Jetpack を無効化する
  2. WordPress Stats、Jetpack をアンインストール
  3. Jetpack のみ再インストール、有効化
  4. Jetpack の設定で wordpress.com アカウントに接続する

あなたの IT の疑問・不安をすべて解決するコンシェルジュ サービス