WEB開発

WordPressでJavaScriptファイルを読み込む方法

WordPressでJavaScriptファイルを読み込み使用するには、wp_enqueue_script関数を利用します。

具体的には、下記のようにfunctions.phpに記述します。

コードについて少し説明してみます。

簡単に説明すると、アクションフックである「wp_enqueue_scripts」(※複数形になっているので注意が必要)
によってwp_enqueue_script関数が含まれたhoge_scriptを呼び出しています。

続いて、「wp_enqueue_script関数」の引数を確認していきましょう。

  • handle スクリプトのハンドル名。デフォルトのスクリプト名と重ならないようにする
  • src スクリプトのURL
  • deps 依存スクリプト識別名を配列で指定
  • ver バージョン文字列
  • in_footer trueにするとスクリプトがbodyの前で読み込まれる。falseだとheadの前で読み込まれる

ここまでだと具体例がないので少しイメージしづらいと思います。

なので、具体的なjavascriptファイルを試しに読み込ませてみたいと思います。

例としてクリックすると開閉する目次(メニュー)を実現させるjavascriptコードを用意しました。
なお、コードはjQueryを利用しています。

こんな感じです。

「1.HTMLとはなにか? 」「2.CSSとはなにか?」をクリックするとリストが表示されます


1. HTMLとはなにか?

2. CSSとはなにか?


まず、下記のコードをWordPressに投稿ページに追加しましょう。

つぎにWordPressのスタイルシートに下記の追記します。

最後に下記のようなjavascriptファイルを用意します。

上記のファイルは「custom_script.js」というファイル名で
sampleというテーマのフォルダの直下にある「js」フォルダに保存されているとします。

では、さっそくcustom_script.jsを読み込んでみましょう。
functions.phpに下記のコードを追記します。

これでjavascriptコードがWordPressに読み込まれるはずです。

参考

【WordPress】画面が真っ白になり何も表示されない場合の対処方法

WordPressでWEBサイトを作成していると、たまに画面が真っ白で何も表示されなくなることがあります。

なんらかのエラーが発生している状態なのですが、セキュリティの関係上、デフォルトではあえてエラーメッセージが表示されない形になっています。 要するに、エラーメッセージからサイトの構成などを推測することができるので、サイトに対する攻撃や不正アクセスのヒントを与えないために表示されない形になってます。

では、エラーへの対処方法について考えてみたいと思います。

続きを読む

WordPressのメンテナンスモードが終わらない場合の対処方法について

WordPressでテーマのアップデートやプラグインの更新をしているとき
間違えて画面を閉じてしまったりすると、メンテナンスモードが終わらなくなってしまうことがあります。

先日、久々に遭遇したので対処方法について書いておこうと思います。

日本語版なら
「現在メンテナンス中のため,しばらくの間ご利用いただけません」

英語版なら
「Briefly unavailable for scheduled maintenance. Check back in a minute.」

と表示され続けます。

初心者の人からすればかなり動揺する事態ですが、修正方法は比較的簡単です。

FTP接続して、WordPressがインストールされたディレクトリにある「.maintenance」というファイルを削除するだけです。

続きを読む

CSSのベンダープリフィクスの付与はgulp-autoprefixerが便利です

前回の記事では、Macによるgulpの開発環境の構築について書きました。

記事の中で、gulpで実行させるタスクの例としてSCSSをコンパイルしてCSSにする方法を説明しましたが、今回はもう一歩だけ進んで、SCSSをコンパイルして出力されたCSSにさらに自動でベンダープレフィックスを付与してみたいと思います。

続きを読む

gulpの開発環境をMacで構築してみる

WEB関係の開発をしていると、HTMLやCSS・Javascriptを圧縮したり、SCSSをコンパイルしてCSSにしたり、CSSコードに必要なベンダープレフィックスを設定したりと様々なタスクを一つ一つ実行していく手間が出てきます。

そういったタスクを自動で実行してくれるのがタスクランナーというビルドツールです。

タスクが自動化できれば、処理のし忘れを防ぐこともできますし、何より煩雑なタスクを自分の手で実行する必要がなくなりますので、開発の工数短縮につながります。

ぜひ導入しておきましょう。

今回は、数あるビルドツールの中でも比較的人気の高い「gulp」の導入を解説していきたいと思います。

動作確認環境

  • OS:OS X Yosemite 10.10.5
  • node.js:v6.4.0
  • npm:3.10.3

続きを読む

WordPressの関連記事(あわせて読みたい記事)を表示させるプラグインの導入について

はじめに

WordPressでブログを運営していると、記事の下に関連記事(あわせて読みたい記事)を表示させたいですよね。
方法はいろいろあると思いますが、WordPressには優れたプラグインがたくさんありますので、今回はプラグインを利用したいと思います。

関連記事を表示させるプラグインはいくつか有名なものがありますが今回は「WordPress Related Posts」を使用したいと思います。

続きを読む

WordPressテーマをカスタマイズするなら子テーマ使用は必須

はじめに

WordPressのテーマは無料でも有料でも素晴らしいモノが多いので、一から自分で作成するよりも既存のモノを利用するのが効率的です。

ただ、既存モノはあくまで他人が作成したものですから、 既存テーマを自分好みにカスタマイズしたいなと思う時があると思います。

テーマをカスタマイズするときに一番簡単なのは、テーマの編集から直接既存テーマを編集することです。 ですが、テーマの編集から直接編集してしまうのは、基本的に避けるべきです。
なぜならテーマの編集から直接編集してしまうと、テーマをバージョンアップしたときに変更した箇所が消えてしまうからです。

だったら、テーマを編集したらテーマをバージョンアップしなければ良いのでは?と考えてしまうかもしれませんが、テーマもできる限りバージョンアップすることをオススメします。

なぜなら、テーマのバージョンアップには脆弱性やバグに関する修正も含まれている場合があるからです。

ではどうやって、テーマをカスタマイズするのか?
その方法が「子テーマ」の利用です。

続きを読む

MarsEditのプレビュー画面を自分のブログデザインで表示させる

僕はこのブログをMarsEditで書いてます。 MarsEditはブログを執筆するためのツールとして人気が高いですが、 やっぱり使いやすいです。

WindowsなどではLive Writerとか無料で使えたりして とても便利ですが、僕は普段Macで使っていますので、やっぱりMarsEditが一番です。

MarsEdit – the blog editor for WordPress, Tumblr, Blogger and more.
カテゴリ: ソーシャルネットワーキング, 仕事効率化

さて、前置きが長くなりましたが、本日の記事の内容は

MarsEditのプレビューを自分のブログデザインで表示させる方法です。

やり方はとても簡単です。

続きを読む

MarsEditでAuto-Detect Settings From URLでエラー

MarsEditの初期設定でエラーが出てしまう。

File→New Blogで登録をしようとすると「MarsEdit was not able to auto-detect your blog settings.」と表示される

MarsEdit

仕方が無いので「Edit Setting」をクリックし、「Auto-Detect Settings From URL」をクリック

MarsEdit-Settings

今度は「Auto-detect Settings Failed Could not determine blog configuration from web page content.」と表示されてしまう。 続きを読む

WordPressのパーマリンク設定を変更するとエラー

パーマリンク設定を変更したらNot Found

WordPressを導入したら絶対に行いたいのはパーマリンクの設定です。

なぜ設定をすべきであるのかは下記の記事が詳しいです。

WordPressのパーマリンク設定を変更して、SEOや日本語URLの対策をしよう | 株式会社LIG
WordPressでもデフォルトで設定されているのですが、実はそのままだと理想的なパーマリンクとは言えません。 …

続きを読む