コンピューター 毎日の日記

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

投稿日:2017年7月2日 更新日:

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

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

 

Advertisements

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

FileZillaの設定と接続

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

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

 

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

  1. 〈新しいサイト〉ボタンをクリック
  2. 自分のサイトのフォルダのしたにサーバーのアイコンができますので、自分の好きな名前にします。
  3. 〈ホスト(H)〉にホスト名を入力します。
  4. 「FTP – ファイル転送プロトコル」を選択
  5. 「明示的なFTP over TLSが必要」を選択
  6. 「通常」を選択
  7. ユーザ名を入力
  8. パスワードを入力
  9. 〈接続〉ボタンをクリック

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という3つのフォルダがあり、その中にBootstrapのファイルが整理されています。

(Finderの拡大図 ▼)

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

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

(※FileZillaの右側ペインの拡大図 ▼)

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

【アップロードの手順】

  1. ローカルサイトのペインの中で、〈bootstrap-3.3.7-dist〉フォルダを選択します。
    このペインの上のバーに「ローカルサイト:」とあり、その右側にリストで表示されているのが今選択したフォルダのパスです。
  2. このペインの中に1で選択したフォルダの中身が表示されますので、css, fonts, jsの3つのフォルダを全て選択します。
  3. 選択したフォルダを、4の bootstrap フォルダにドラッグしてアップロードします。

(※FileZillaの右側ペインを拡大した図 ▼)

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

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

 

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

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

-コンピューター, 毎日の日記

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

人工知能で仕事がなくなる?生活の保障は?AIの利用の仕方は?Part1

  2013年ごろから、 10年後に人の仕事は半分に激減する と言うことが言われるようになって、5年が経過しました。 医学の世界では、iPS細胞の研究が進み STAP細胞の騒動もありましたが …

山崎パンの添加物で発がん性物質が使われ健康に悪いはデマ?

山崎パンがとある添加物「臭素酸カリウム」をまた使い始めたので、食べないほうがいい、と言うツイートを見かけて、「ちょっと気になるな」と思い、本当に危険なのかを調べてみたので、その内容を紹介します。 &n …

no image

完全断食と同じ効果を得るにはダイエット断食で何日?計算方法は?

皆さん、こんにちは。 私はこれまで飲み物を食事に置き換えて飲む ダイエット断食の方法で、断食をいくつかして きました。 すると、水だけ飲む断食とダイエット断食では 体にある症状が現れるのにかかる日数が …

アニメの暴力シーンは青少年にどのような影響を与えるかPart1?

  最近、博多豚骨ラーメンズの2018年1月からアニメ化 ということを聞き、その小説を読んでみました。 それがきっかけで 人を殺すシーンがあまりにも多いアニメの 子供に与える影響が非常に気が …

飯島三智CULEN設立!稲垣・草薙・香取の今後の活動予想!

★提供: AbemaTV, 「72時間ホンネテレビ」より   皆さんこんにちは。この記事は「72時間ホンネテレビの視聴者数は?飯島三智の敏腕が唸る?」の続きになります。 まだ読んでない方は、 …

スポンサードリンク