Simplicityをカスタマイズ。style.cssとjavascript.jsはどこにあるのか解説

どうも、KENUKEです。

ぼくはWordPress初心者です。WordPressをカスタマイズしようとしたとき、いろいろなサイトを参考にさせて頂いています。

ほとんどのサイトでは、style.cssjavascript.jsを編集すればよいと書かれているのですが、基本的すぎるのか、どこをどうすればよいのか、ぼくにはわかりませんでした。

ぼくと同じように悩んでいる初心者の方がいるかもしれませんので、style.cssjavascript.jsの場所と、編集方法を紹介したいと思います。

スポンサーリンク

今回説明していく環境について

ぼくの環境はサーバーがエックスサーバー
で、テーマがSimplicityとなっています。これ以後は、この条件で説明を進めていきます。

Simplicityはこちらのサイトで無料で公開されています。非常にありがたいです。

Simplicity子テーマをインストールして、それをカスタマイズしていくことになります。まだ、子テーマをインストールしていない人はこちらを参考にしてください。

編集作業の全体の流れ

style.cssjavascript.jsを編集するには

  1. FTPソフトを準備
  2. エックスサーバーから自分のパソコン(ローカル)へファイルをダウンロード
  3. エディタでファイルを編集
  4. 自分のパソコン(ローカル)からエックスサーバーへファイルをアップロード

style.cssjavascript.jpのサーバーでの場所さえ確認できれば、あとは機械的な作業になります。わかっていれば簡単ですね。

FTPソフトとは、自分が契約しているサーバー(ここではエックスサーバー)と自分のパソコンとの間でファイルのやり取りをするためのソフトです。

エックスサーバーのFTP接続情報の確認

エックスサーバーを契約したときのメールの『サーバーアカウント情報』の欄に、FTPの接続情報が載っています。この情報を使ってFTPソフトの設定しますので、すぐ見れるようにしておいてください。

ぼくの例ではこんな感じで送られてきています。

  • FTPホスト   : ○○○.xserver.jp
  • FTPユーザー  : △△△△△△
  • FTPパスワード : □□□□□□
大事な情報ですから、ぼくは印刷してファイルしてます。個人的にですけど、紙に出して保管しておくことをおすすめします。

FTPソフトの設定

FFFTPの紹介

ぼくはFTPでは定番のフリーソフト、FFFTPを使っています。使い方も簡単です。

FFFTPは窓の杜でダウンロードできるので、ぜひ試してみてください。

FFFTPの設定

ホスト一覧を起動する

FFFTPを立ち上げて『接続』から『ホストの設定』をクリックします。

『新規ホスト』をクリックします。

基本タブの設定

『基本タブ』を次の図のように設定します。

『ホストの設定名』は自分がわかりやすい名前であれば何でもよいです。

ここで事前に確認しておいたエックスサーバー契約時の情報を設定していきます。

FFFTP 契約情報
ホスト名(アドレス) FTPホストの内容を記入
ユーザー名 FTPユーザーの内容を記入
パスワード/パスフレーズ FTPパスワードの内容を記入

残りは空欄とチェック無しとします。

暗号化タブの設定

続いて『暗号化』タブを次のように設定します。

FTPS(Explicit)で接続』『弱い暗号化方式を使用しない』のみにチェックを入れます。

ここで『OK』をクリックして設定終了です。

style.cssとjavascript.jsファイルの場所

エックスサーバーへ接続

今作成した接続を選択して『接続』をクリックします。

次のように画面の右側にディレクトリが表示されれば成功です。そして、そこがエックスサーバーのディレクトリになります。

style.cssとjavascript.jsの場所

style.cssjavascript.jsの場所は、ぼくの環境では次のようになります。

/kensukesblog.com/public_html/wp-content/themes/simplicity2-child

上の2つの赤字の部分を自分の環境に読み替えて、エックスサーバーのディレクトリをたどっていってください。

ちなみにぼくの例では、『kensukesblog.com』がこのブログのドメイン、テーマはSimplicityを使っていますので、その子テーマの『simplicity2-child』となっています。

style.cssjavascript.jsはありましたか?

これらをダウンロード、編集し再度アップロードすれば目的達成です。

ダウンロード方法

style.cssをダウンロードしてみます。javascript.jsでも同じです。

ダウンロードするファイルを選択

画面右側のstyle.cssを選択します。

転送モードを指定

次にバイナリ転送モードをクリックします。

保存先フォルダを指定

画面左側の『フォルダの移動』をクリックして自分がダウンロードしたいフォルダへ移動します。

ダウンロード

『ダウンロード』をクリックしてダウンロードします。

これでダウンロードは終了です。適当なエディタでこのファイルを編集して、アップロードするだけです。

編集方法

 編集前に必ず、ファイルはコピーして編集前のものを残しておくことをお勧めします。
編集ファイルに問題がありWordPressの動作がおかしくなったら、編集前のバージョンをアップロードすることで元に戻すことができます。
 style.cssを適当なエディタで開いて、自分が追加したいコードを書いていきます。
@charset "UTF-8";

/*!
Theme Name: Simplicity2 child
Template:   simplicity2
Version:    20161002
*/

/* Simplicity子テーマ用のスタイルを書く */

ここに自分が追加したいコードを書いていきます。

これで編集終了です。

javascript.jsの場合はこちらです。

//ここに追加したいJavaScript、jQueryを記入してください。
//このJavaScriptファイルは、親テーマのJavaScriptファイルのあとに呼び出されます。
//JavaScriptやjQueryで親テーマのjavascript.jsに加えて関数を記入したい時に使用します。

ここに自分が追加したいコードを書いていきます。

アップロード方法

アップロードはダウンロードの逆順で行うだけです。ここでもstyle.cssで説明していきます。FFFTPはサーバーに接続しておいてください。

FFFTPの画面左側で、次の図のように編集したファイルを選択します。

次に転送モードをダウンロードのときと同じようにバイナリ転送モードにします。

そしてFFFTPの画面右側のエックスサーバーのディレクトリ上で、style.cssの元の場所まで移動します。

/kensukesblog.com/public_html/wp-content/themes/simplicity2-child

kensukesblog.com』『simplicity2-child』は自分の環境に読みかえてくださいね。

ここまで出来たら『アップロード』をクリックしてアップロードします。

次のようなダイアログが表示されるので、『上書き』を選択して、『OK』をクリックします。

以上で、アップロード終了です。

後はWordPressで自分の変更した個所を確認してみてください。

まとめ

こういった基本的なことは、できる・できないではなく、知っているか・いないかの違いだと思います。

ぼくもはじめは全然わからなくて、みんなどうやってカスタマイズしてるんだろうかとずいぶん悩みました。

知っていれば、その分ブログの記事に集中できますので、ぼくのような初心者の方、ぜひご参考ください。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする