WordPressにBootstrapを導入方法の手順について書いてみました2

みなさん今日は。前回は、FTPソフトFileZilla Clientのダウンロードのところまで説明しました。

今日は、FileZillaの設定と接続の仕方からBootstrapの設定ファイルのダウンロードなどについて説明をしていきたいと思います。

 

FileZillaの設定と接続

FileZilla Clientを開き、メニューバーの「ファイル」→「サイトマネージャ(S)…」をクリックします。

サイトマネージャーの設定は、ご自分の契約しているサーバーのホームページに掲載されている情報を参考にして設定します。

 

サイトマネージャの設定の手順

FileZillaでサーバーに接続してください。

 

Sponsored Link

 

自分の mynewtheme フォルダーをサーバーに作る

接続ができたら、Filezillaの右側「リモートサイト」のペインにフォルダーアイコンが表示されます。

ここで、最初にすることは、
〈/(自分のサイト名).com/public_html/wp_content/themes〉のフォルダのしたに〈mynewtheme〉というフォルダを新規に作成します。

上の図はフォルダがたたんだ状態なので、まずは、フォルダを開いて目的のフォルダーまで進んでいきます。

（※FileZillaの右側ペインを拡大した図　▼）

▼〈public_html/theme〉フォルダまで来たら、そこで右クリックして表示されるショートカットメニューの中から、「ディレクトリーを作成」をクリックします。

▼〈wp-content/themes/〉の右側に”mynewtheme”と入力します。
（※ここは自分の好みによってフォルダー名を変えても結構です）

▼mynewthemeという新しいフォルダがthemesフォルダのしたにできました。

 

スポンサードリンク(Sponsored Link)

 

Bootstrapの設定ファイルをダウンロードする

まだ、Bootstrapの設定ファイル（今の最新バージョンはv3.3.7）をダウンロードしていない場合は、こちらのリンクからダウンロードします。

ダウンロードしたファイルはzipファイルです。このファイルを解凍すると、bootstrap-3.3.7-dist というフォルダができます。このフォルダのさらに下には、css、fonts、jsという３つのフォルダがあり、その中にBootstrapのファイルが整理されています。

（Finderの拡大図　▼）

サーバーにBootstrapの設定ファイルをアップロード

次にサーバーの〈theme/mynewtheme〉配下に、bootstrap というフォルダを作ります。

（※FileZillaの右側ペインの拡大図　▼）

このbootstrapフォルダの中に、先程解凍した〈bootstrap-3.3.7-dist〉フォルダ配下の３つのフォルダをアップロードします。

【アップロードの手順】

（※FileZillaの右側ペインを拡大した図　▼）

ここで、Bootstrapの設定ファイルのアップロードが出来ました。
ここに保存したフォルダの中のファイルを、新しいテーマのテンプレートから読み込んで画面のレイアウトや調節をしていきます。

次は、幾つかファイルを作っていくことになります。

 

冒頭画像の提供サイト : フリー素材ぱくたそ