ブートストラップに基づいてWordPressレスポンシブテーマを作成する方法

解像度、画面サイズ、オペレーティングシステムが異なる非常に多くのデバイスがあるため、レスポンシブWebサイトとアプリケーションは、ブランドのオンラインプレゼンスにとって不可欠な要件になっています。

すべてのWebトラフィックの52％以上がモバイルデバイスからのものであり、その数は増加しています。 Web開発者、マーケター、およびデザイナーは、Webサイトが応答性が高く、解像度やアスペクト比に関係なく、どのデバイスでも簡単に表示、ナビゲート、および閲覧できる場合、大きな可能性を理解しています。

レスポンシブテーマは、Webデザインへのアプローチであり、Webサイトの要素が画面サイズとブラウザーに応じて自己調整され、読みやすさ、ユーザーエクスペリエンス、および読み込み時間が向上します。 開発者とテーマデザイナーは、レスポンシブWebサイトの概念を利用しています。 多くのブランドは、ウェブサイトをレスポンシブでモバイルフレンドリーにするために、WordPressDeveloperもますます採用しています。

2013年11月、Googleのウェブスパムチームの責任者であるMatt Cuttsが、レスポンシブデザインがSERPであなたに悪影響を及ぼさないことを説明するビデオをリリースしました。 さらに、グーグルはまた、グーグルがレスポンシブウェブサイトをどのように扱うかについての詳細を含むモバイルフレンドリーなウェブサイトに関するガイドラインを公開しました。

スマートフォンや他の同様のデバイスの台頭により、デスクトップやラップトップの使用は（ゆっくりと）減少しています。 つまり、人々はスマートフォンを使用して、ニュースから地元の店舗、飛行機の問い合わせから最新の映画まで、ほぼすべてのものを検索しています。 この上昇傾向は、オンラインコミュニティに大きなビジネスチャンスをもたらします。

WordPressとレスポンシブウェブ

WordPressは、インターネットの大部分を支える最も人気のあるCMSです。 オープンソースの開発者やデザイナーの強力なコミュニティからのサポートを受けています。 レスポンシブウェブデザインの台頭に伴い、多くの有名なテーマ開発者がレスポンシブデザインに切り替え、Redux Framework、Carrington Core、 Bootstrapなどのわかりやすいフレームワークを導入しました。これはレスポンシブWordPressテーマを最初から作成するのに理想的です。

ブートストラップとは何ですか？

Bootstrapは、モバイルフレンドリーなフロントエンドWeb開発に使用されるオープンソースフレームワークです。 これは、CSSおよびJavaスクリプトベースのデザインテンプレートを介してレスポンシブWordPressテーマを作成するために使用できることを意味します。

Bootstrapは、複雑なWebアプリケーションの開発プロセスを簡素化するツールキットです。 これはTwitter開発チームの発案によるものであり、オープンソースコミュニティで利用できるようになりました。 このフレームワークは、LessCSSでコーディングされているため、その軽量構造のために人気がありました。

BootstrapをWebサイトに追加することで、そのクラスを呼び出して、ボタン、グリッド、テーブル、メニューなどの事前に作成された要素を追加できます。同様に、複雑なメディアクエリを追加せずに、既存の要素をレスポンシブにすることができます。

WordPressブートストラップテーマを作成する

WordPressブートストラップテーマの作成は、実際には8ステップのプロセスです。 良いニュース–Bootstrapを利用したテーマを簡単に作成できます。

ステップ1：ブートストラップを解凍します

1. まず、ドメインにWordPressをインストールします。
2. Bootstrapをダウンロードして解凍します。
3. 完了したら、FileZillaなどのFTPクライアントを使用して接続します。
4. wp-content > themesに移動します。
5. Themesフォルダーに新しいフォルダーを作成し、 BootSThemeという名前を付けます。 解凍したBootstrapの内容をこのフォルダにアップロードします。
6. ほとんどすべてのWordPressインストールには、次のファイルが含まれています。

• footer.php
• header.php
• index.php
• style.css

次に、 BootSThemeフォルダーに上記の名前の空のファイルを4つ作成します。

ステップ2：ブートストラップを構成する

BootSThemeフォルダーで、 style.cssを開き、次のコードを貼り付けます。

 / *
テーマ名：MyTheme
テーマURI：https：//cloudways.com
説明：ブートストラップ上に構築された神話
バージョン：1.1
著者：Ahsan Parwez
著者URI：https：//cloudways.com
* /

これらは基本的に、テーマに関する説明と詳細を提供するコメントです。 テーマの詳細を反映するようにこれらのコメントを変更することを強くお勧めします。

ステップ3：コードをコピーする

このチュートリアルでは、Bootstrapパッケージで提供されているCSSファイルとJSファイルのすべてを使用するわけではありません。 開発プロセスを開始するには、 bootstrap.min.cssファイルのコードをコピーして、 style.cssファイルに貼り付けます。 この時点で、 style.cssファイルは次のようになります。

注：完全に縮小されたCSSコードは、BootstrapWebサイトから入手できます。

ステップ4：HTMLテンプレートを設定する

使用する基本的なHTMLテンプレートが必要です。 簡単にするために、このHTMLテーマを使用します。 チュートリアルを続行するには、ダウンロードすることをお勧めします。

WordPressには組み込み関数get_header（）とget_footer（）があり、デフォルトでそれぞれファイルheader.phpとfooter.phpを呼び出します。

HTMLコードを上から最初のコンテナーdivまで切り取り、 header.phpファイルに貼り付けることから始めます。 ファイルは次のようになります。

footer.phpファイルには、残りのコードが含まれます。

この時点で、Bootstrap WordPressテーマをアップロードしてアクティブ化すると、 index.phpには何も含まれていないため、何も表示されません。

ヘッダーとフッターをロードするには、WordPressの組み込み関数を使用してこれらの要素を呼び出します。 このために、 index.phpに次のコードを貼り付けます。

 <？php get_header（）; ？>

<？php get_footer（）; ？>

これで、ヘッダー要素とフッター要素がWebサイトに読み込まれますが、スタイルがまったくない基本的なページが表示されます。

ステップ5：ヘッダーとフッターを設定する

header.phpファイルで、WordPress関数echo get_stylesheet_uri（）を使用してBootstrapスタイルシートをインポートします（ WordPress Codexで関数の詳細を参照してください）。 style.cssをWebサイトにインポートすると、トップメニューバーが表示されます。

header.phpファイルの先頭に次のコードを追加してstyle.cssを追加することもできます。

 <link rel = "stylesheet" type = "text / css" href = "<？php echo get_stylesheet_directory_uri（）。 '/ style.css'？>"> 

ただし、これだけではありません。ページのJavaScript機能は引き続き機能せず、ドロップダウンメニューも表示されません。 これを有効にするには、 footer.phpのURLでファイルを直接インポートして、jsファイルをインポートします。 終了bodyタグの前に次のコードを貼り付けます。

 <script src = "../ wp-content / themes / MyBSTheme / js / bootstrap.min.js"> </ script>

WordPressは、そのカスタマイズとプラグインで知られています。 プラグインフックを配置する場所をWordPressに伝えるために、 <？php wp_head（）;を貼り付けます。 ？>および<？php wp_footer（）; ？> header.phpおよびfooter.phpファイル内。 また、Webサイトの動的なタイトルを設定するには、 wp_title（）を使用します。 <title>タグ間のheader.phpファイル内の関数。

 <title> <？php wp_title（ '|'、true、 'right'）; > </ title>

上記のコードは、投稿のタイトルを「|」で区切って呼び出します。 サイト名より。 ブール値trueは、タイトルを表示します。 falseに設定すると、値が返されるだけで表示されません。 「right」は、投稿タイトルの場所を区切り文字の右側に定義します。

ステップ6：注目の投稿を表示する

次に、投稿をホームページに動的に呼び出し（によって表示されるように） 、上部に表示します（多くのWordPressを利用したサイトで見られる注目の投稿と同様）。

次のコードをindex.phpに記述します。

 <？php

query_posts（ 'posts_per_page = 1'）;

while（have_posts（））：the_post（）; ？>
<div>
<h2> <a href="<?php the_permalink().?> "> <？php the_title（）; ？> </a> </ h2>
<p> <？php the_excerpt（）; ？>＆lt; / p>
</ div>

<？php endwhile; wp_reset_query（）; ？>

ご覧のとおり、 whileループを使用しており、 post_per_pageを使用して投稿数を1に設定しています。 この行には、ページの上部に最新のブログ投稿のみが表示され、ループが閉じた後、 query_postsがリセットされます。

クラスジャンボトロンは、 bootstrap.min.cssファイルで定義されています。 <h2>タグとthe_permalink（）を使用して、注目の投稿のスタイルを設定します。 関数。 ハイパーリンクは投稿のタイトルに作成され、 the_permalink（）; 関数は投稿全体のURLにリンクします。 投稿の抜粋を表示するために、別の組み込みのWordPress関数the_excerpt（）;を使用しました。

ステップ7：カテゴリを一覧表示する

ホームページの左側にカテゴリをリストします。 BootstrapクラスとWordPress関数wp_list_categories（）でスタイル設定されたdivのインスタンスをいくつか作成します。 。

次のコードをindex.phpに貼り付けます。

 <div class = "panel panel-default panel-body">
<div>
<div>

<ul>
<？php wp_list_categories（ 'orderby = name＆title_li ='）; ？>
</ ul>

</ div>
</ div>
</ div>

これにより、ホバー効果のあるカテゴリが名前で一覧表示されます。

ステップ8：最新の投稿と作成者を表示する

最後に、ホームページに最新のブログ投稿を掲載します。 別のdivタグを開始し、このdivの下で、注目の投稿で使用したのと同様のwhileループ手法を使用しますが、 query_posts（）で制限することはありません。 。

 <div>

<？php while（have_posts（））：the_post（）; ？>

<h3> <a href="<?php the_permalink().?> "> <？php the_title（）; ？> </a> </ h3>
<p> <？php the_excerpt（）; ？> </ p>
<p>投稿者<？php the_author（）; ？>

<？php endwhile; wp_reset_query（）; ？>

</ div>

WordPress関数the_author（） ; 投稿の作成者のユーザー名を取得します。 これを使用して、投稿ごとに作成者の名前を動的に表示できます。

すべてが正常に完了すると、上の画像に表示されているようなページが表示されます。

既存のWordPressテーマにブートストラップを追加する

レスポンシブではないWordPressテーマを使用している場合は、Bootstrapを追加してモバイルフレンドリーにすることができます。 WordPressとBootstrapは2つの異なる方法で使用できます。

CDNを使用したブートストラップの追加

CDNをheader.phpファイルに追加するだけで、Bootstrap要素の使用を開始できます。

注：この方法では互換性の問題が発生する可能性があるため、次のコードを追加する前に、必ず完全バックアップを作成してください。

 <！-最新のコンパイルおよび縮小されたCSS->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<！-最新のコンパイルおよび縮小されたJavaScript->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"> </ script>

FTPまたはプラグインを使用してheader.phpファイルにアクセスできます。 上記のコードには、パフォーマンスを向上させるCSSファイルとJSファイルの縮小バージョンが含まれています。

Functions.php内にブートストラップを追加する

この方法では、Bootstrapライブラリをダウンロードする必要があります。 Bootstrap.min.cssファイルとBootstrap-theme.min.cssファイルをテーマCSSフォルダーにアップロードし、Bootstrap.jsファイルをWordPressテーマの「js」というテーマフォルダーにアップロードします。

次に、functions.phpファイルにアクセスして、これらのスクリプトをキューに入れます。

関数.phpファイル内に次のコードを追加します。

 関数reg_scripts（）{
    wp_enqueue_style（ 'bootstrapstyle'、get_template_directory_uri（）。 '/ css / bootstrap.min.css'）;
    wp_enqueue_style（ 'bootstrapthemestyle'、get_template_directory_uri（）。 '/ css / bootstrap-theme.min.css'）;
    wp_enqueue_script（ 'bootstrap-script'、get_template_directory_uri（）。 '/ js / bootstrap.min.js'、array（）、true）;
}
add_action（ 'wp_enqueue_scripts'、 'reg_scripts'）;

アップロード部分をスキップして、ブートストラップCDNを直接キューに入れることもできます。

 関数my_scripts_enqueue（）{
    wp_register_script（ 'bootstrap-js'、 '// maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js'、array（'jquery'）、NULL、true）;
    wp_register_style（ 'bootstrap-css'、 '// maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'、false、NULL、'all'）;

    wp_enqueue_script（ 'bootstrap-js'）;
    wp_enqueue_style（ 'bootstrap-css'）;
}
add_action（ 'wp_enqueue_scripts'、 'my_scripts_enqueue'）;

ファイルを保存して、サーバーにアップロードし直します。

次は何ですか？

このチュートリアルは、主にHTMLテンプレートから基本的なWordPressテーマを作成し、Bootstrap3.xを使用して応答性を高めることに焦点を当てています。 今後の投稿では、single.php、front-page.php、functions.phpなどのページをさらに作成する予定です。 また、functions.phpファイルからスタイルシートとJavaScriptをインポートする方法についても説明します。

サポートが必要な場合は、下にコメントを投稿してください。折り返しご連絡いたします。