WEB開発

Dockerによる開発環境構築(Mac + Nginx + PHP-FPM + MySQL)Part 1

Dockerを利用してPHPの開発環境を用意してみましょう。

Dockerのインストール

MacにDockerをインストールするのは簡単です。
公式サイトから「Docker for Mac」をダウンロードしてインストールするだけです。

下記から「Docker for Mac」をダウンロードします。

Install Docker Desktop for Mac | Docker Documentation

インストールが終わったら、ターミナルから確認してみましょう。

続きを読む

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

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

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

function hoge_scripts() {
  	wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
add_action( 'wp_enqueue_scripts', 'hoge_scripts' );

続きを読む

【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.」と表示されてしまう。 続きを読む