4

Wordpress を Twitter Bootstrap と一緒に使用するにはどうすればよいですか? Wordpress ページのセットアップ方法は知っており、Bootstrap を使用したこともありますが、この 2 つを初めて一緒に使用したいと考えています。

私の Wordpress プロジェクトでは、通常、Wordpress をインストールしただけで、新しいテーマを作成することから始めました。Bootstrap プロジェクトでは、常に Initializr を使用してテンプレートを作成しました。

Google を使用して、さまざまな「Bootstrap テーマ」とプラグインを見つけましたが、そのうちの 1 つが必要ですか? LESSを使って自分の色などでブートストラップの見た目をカスタマイズしたいのでお願いしています。これら 2 つがどのように連携するかを理解するのに苦労していますが、適切なリソースが見つかりません。

4

4 に答える 4

10

これに取り組むにはいくつかの方法がありますが、これが私が行ってきたことです...

  1. お気に入りの出発点テーマのコピーを取る
  2. 完全なブートストラップ リポジトリ (less とすべて) をダウンロードし、テーマ フォルダーにポップします。
  3. ブートストラップ フォルダー内に「css」というフォルダーを作成し、これをコンパイル済みの「bootstrap.css」ファイルを出力する場所として設定します。
  4. 次に、テーマ ルートで「styles.css」を開き、新しいテーマを作成する場合と同じようにテーマ名などを変更し、すべてのスタイルを削除してコードを 1 行だけ追加します。@import url("bootstrap/css/bootstrap.css");
  5. これで、「wp-admin」の「外観」メニューからこの新しいテーマを選択できるはずです。
  6. 明らかに恐ろしく見えますが、テーマ クラス/ID のいくつかを「layout.less」に追加すると、次に、「variables.less」を実行して、どこかに取得する基本テーマを追加します。
  7. それ以外は、各テンプレート ファイルを調べて、すべてのクラス/ID を考慮する必要があります。既存のブートストラップ クラスをより有効に利用するためにテーマを編集することもありますが、独自のカスタム クラスを追加する必要がある場合もあります。ブートストラップ。

かなり時間がかかりますが、一度完了すると、将来のプロジェクトをスピードアップするために再利用できることは明らかです。

ちなみに、私はこれと同じ原則を使用してテーマを構築していますが、両方の素晴らしいプロジェクトに基づいています。どれが一番自分に合っているか見てみることをお勧めします。

于 2012-07-18T14:18:19.087 に答える
4

いつでも Twitter Bootstrap WordPress プラグインを使用できます。WordPress.org では完全に無料です: http://wordpress.org/extend/plugins/wordpress-bootstrap-css/

また、多くのショートコードが含まれているため、Bootstrap 要素をページ内に含めて投稿できます。すべてのデモ ページがここにあります: http://worpit.com/wordpress-twitter-bootstrap-css-plugin-home/wordpress-shortcodes -デモ/

始めるのに役立つことを願っています!

于 2013-02-11T17:16:54.733 に答える
1

以前、stackoverflow で同じ質問に答えました。共有が遅くなったような気がしますが、そのようなチュートリアルを探している人は、与えられたハイパーリンクのタイトルをクリックしてください: Using Twitter Bootstrap in Wordpress .

于 2013-10-26T07:12:03.880 に答える
0

テーマで composer を使用する簡単な方法があります。

composer.json

{
        "config": {
                        "component-dir": "lib/composer",
                        "vendor-dir": "lib/composer",
                        "bin-dir" : "bin/composer",
                        "cache-dir" : "var/cache/composer"
        },
        "require": {
                        "twitter/bootstrap": "3"
        }
}

注: 複雑さを軽減するために、他のコンポーザーのセクションと要件、および ping の統合を削除しました。

実行する

 composer install

次に、テーマに /lib/composer/twitter/bootstrap/dist/css/bootstrap.css を次の文で追加します

    $bootUri = get_template_directory_uri() . '/lib/composer/twitter/bootstrap/dist/css/bootstrap.css';

    wp_enqueue_style('sindy_bootstrap', $bootsUri);

ほら！:)

于 2014-01-18T11:19:44.970 に答える