たった3分!WordPressテーマをカスタマイズ【簡単準備編】

wp
井上 慎也
書いた人 井上 慎也
侍エンジニア塾ブログは、未経験からWebアプリ開発と仕事獲得をサポートする
侍エンジニア塾のオウンドメディアです。
プログラミング学習を覗き見

こんにちは!インストラクターの井上(@InoIno_iesa)です。

WordPressを学習したい!カスタマイズしてみたい!

そう思ってもどのように環境を用意したり、Wordpressをインストールして準備したらよいのか分からないという方も多くいらっしゃるかと思います。

もしWordPressのテーマをカスタマイズしたりできる開発環境を一瞬で作れるとしたら是非知っておきたいですよね。

今回は実際にWordpressをカスタマイズしはじめられるところまで紹介しますので、Wordpress学習を始めようかと考えている方は一緒に進めていただければと思います。

一瞬でWordpress開発環境が出来るCloud9

WordPressやPHPプログラミング初心者のかたにオススメしているツールにCloud9というものがあります。

いろんな開発環境が数回クリックだけで作ることが出来るスグレモノです。

今回はWordpressの場合にどう扱うか詳しく見ていきます。

なお、詳しいCoud9の使い方や便利な機能を知りたい方は次の記事もご覧ください。

WordPressの開発環境構築3ステップ

Cloud9を使って環境構築をする手順を紹介していきます。

1.Cloud9に会員登録

はじめにこちらにアクセスして、Cloud9のアカウントを作成します。

新しく会員登録をするための”Sign UP”というところをクリックして下さい。
スクリーンショット_2015-11-30_15_56_03

今回は「GitHub」というサービスのアカウントを利用して作成することにします。

もちろん、メールアドレスで作成しても問題ありません。

メールアドレスで作成する場合は名前にスペースを入れないように半角英数字で入力することに気をつけて下さい。

スクリーンショット_2015-11-30_15_57_27

2.ダッシュボードへ移動

アカウントを作成することができたら、マイページである「ダッシュボード」に入ります。

ここで「ワークスペース」というそれぞれの開発スペースを管理します。

スクリーンショット 2015-11-30 16.49.42

では実際にWordpressの学習用ワークスペースを作成していきましょう。

3.WorkSpaceの作成

ワークスペースを作成するためには、まずプラスマークの付いている部分をクリックして、ワークスペース作成画面に移動します。

スクリーンショット_2015-11-30_16_49_42

ワークスペースの各種情報を入力してワークスペースを作成します。

①ワークスペース名を入力します。ここでは”samurai-sample”とします。

②あとで何のために作ったのかわかるようにDiscriptionに説明を入力しておくと良いでしょう。

③他の人に見えるPublicなワークスペースは無料でもいくつも作成できますのでひとまずPublicを利用します。

④Wordpressを構成するファイルを用意したいので「Wordpress」を選びます。

⑤ワークスペースを作成すると自動的にそちらに移動します。

スクリーンショット_2016-04-04_0_43_14

WordPressの開発環境を作る場合、テンプレートは「Wordpress」を選びましょう。

これによりWordpressを構成するファイルが予め展開された状態になります。

ワークスペースが作られると以下のような画面に移動します。

スクリーンショット 2016-04-25 15.46.16

これだけでWordpressの開発環境ができています。

WordPressのカスタマイズについて

プラグインの設定について

WordPressのプラグインはインストールの有無はディレクトリに配置されているかどうかだけです。

プラグインの設定情報はデータベースが持っているため、本番環境等でも同様に動作させたい時にはデータベースの情報も移動させる必要ある点だけ注意が必要です。

テーマのカスタマイズについて

WordPressのテーマは、
wp-content => themes
の中にある各種テーマのphpファイルなどを編集していくことで可能です。

まずはじめは分かりやすいシングルページなどにPHPの処理を書いて動作を試すと良いでしょう。

まとめ

WordPressの学習環境および方法を紹介してきましたがいかがでしたでしょうか?

Cloud9などを使うとWordpressのカスタマイズも効率的に学ぶ事ができます。

是非楽しいWPライフを過ごしてくださいね!

【関連記事】


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


未経験者でも安心の徹底サポート!まずは完全無料の体験レッスン!

「プログラミングに興味があるけど未経験だし、、、」とお悩みの方はご安心ください。

  • 24時間質問し放題
  • あなただけのオーダーメイドカリキュラムで学習の効率化
  • 仕事獲得方法からオリジナルアプリ開発方法

侍エンジニア塾では徹底したサポートによる「オーダーメイドカリキュラム」を作成しています。

まずは無料体験レッスンで、「挫折しない学習方法」や「あなただけの学習ロードマップ」を知り、学習の効率化をしましょう。独学の難点である「オリジナルアプリの作り方やエラーの対処法」についてもアドバイスさせていただきます。

詳しいサービス内容は、下記よりご参照ください。

cta_mtm1

非常識な結果を出した卒業生

活躍する現役エンジニア

人気記事セレクション

LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

井上 慎也

井上 慎也

侍エンジニア塾のインストラクター。フリーでWEB制作の受託や自身の事業の傍ら、侍ではWEBプログラミング方法の指導やプログラミング学習コミュニティの運用を行っている。
好きなショートカットキーは、command + w 。愛機はMac Book Pro。ブラウザのタブを大量に開きがち。