Beans Frameworkを使用したより高速なWordPressテーマ開発

豆の力を活用：効率的な開発のためのWordPressテーマフレームワーク

カスタムWordPressテーマを構築するのは気が遠くなる可能性がありますが、豆のような堅牢なフレームワークはプロセスを大幅に簡素化します。 Thierry Mullerによる無料でオープンソースのフレームワークであるBeansは、事前に構築された機能とコンポーネントを提供し、開発を劇的に加速します。 この記事では、その主要な機能を調査し、カスタマイズする方法を示しています。

豆フレームワークの重要な機能：

• Mobile-first＆Responsive：Beansはモバイル応答性を優先し、各デバイスの解像度に最適化された画像をインテリジェントに提供します。
軽量＆速い：
• リーンコード、キャッシング、選択的資産の負荷、および模倣により、SEOとユーザーエクスペリエンスに有益な燃えるような負荷時間が保証されます。 uikit統合（オプション）：
は、清潔で現代の美学のためにuikitをレバレッジしますが、他の資産を使用する柔軟性を提供します。
• 親/子のテーマ構造：の修正は、子供のテーマに加えられ、豆の更新中にカスタマイズを維持します。
• コンピレーションが少ない：テーマのルックアンドフィールを使用して、CSSに自動的にコンパイルされている。
• 柔軟なグリッドシステム：さまざまな画面サイズにわたってレスポンシブデザインを促進します。
広範なドキュメントとコミュニティのサポート：
• 包括的なリソースは支援を受けています。
豆を始めましょう：
• 公式Webサイトから豆をダウンロードし、
フォルダーを抽出し、WordPressテーマディレクトリにアップロードします。外観からアクティブ化します＆gt;テーマパネル。 すぐに使える豆は、清潔で機能的なベースを提供します

tm-beans

子供のテーマの利用：

保守性については、豆を親のテーマとして使用し、子テーマでカスタマイズします。 Beans Starter Childのテーマをダウンロードし、フォルダーの名前（例：テーマの名前に）を変更し、WordPressテーマディレクトリに配置します。 子供のテーマのカスタマイズ：

子テーマの名前を変更します：

テーマの名前を反映するようにフォルダー名を変更してください。

カスタマイズstyle.css：テーマの詳細とともにstyle.cssでヘッダーコメントを更新します。

カスタマイズ：functions.php重要な行は残る必要があります。 提供されたコードスニペットを変更して、UIKITアセット（より少ない）またはカスタムCSSを排除できます。 require_once( get_template_directory() . '/lib/init.php' );

開発モードをアクティブ化および有効にします：

子テーマをアクティブにし、外観とGTで「開発モードを有効にする」を有効にします。豆の設定。これにより、リアルタイムのコンピレーションを減らすことができます。

スタイリングが少ない：

を変更して、uikit変数をオーバーライドします。 たとえば、見出し色の変更：

style.less

豆はこれをCSSに自動的にコンパイルします。

@base-heading-color: #baa8da;

テンプレートファイルのカスタマイズ：

ビーンズテンプレートファイルには、単一の行が含まれています：

。 カスタマイズは、アクションフックで

を介して行われます。 たとえば、CSSクラスの削除：<?php beans_load_document(); ?> functions.php

これにより、サイトタイトルから

beans_remove_attribute( 'beans_site_title_tag', 'class', 'uk-text-small' );

クラスが削除されます。

関数はクラスを追加し、その他の関数により、より複雑な操作が可能になります。 uk-text-small beans_add_attribute()

アクションフックでマークアップを追加：

アクションフックを使用してHTMLを追加します。 たとえば、投稿日までにアイコンを追加します：

これにより、単純な

タグが追加されます。 より洗練されたマークアップは、

beans_add_action( 'beans_post_meta_item_date_prepend_markup', 'beans_child_add_post_meta_date_icon' );

function beans_child_add_post_meta_date_icon() {
  echo '<i></i>';
}

および

。 <i></i>beans_open_markup()例：ホームページグリッドレイアウト：beans_close_markup()

デモテーマ（ここには含まれていませんが、元の記事に記載されている）は、BeansグリッドシステムとUIKITクラスを使用してホームページにタイル張りのレイアウトを作成することを示しています。 これには、デフォルトのレイアウトの変更と適切なUIKITクラスの追加が含まれます。 結論：

豆は、WordPressテーマ開発のための強力で効率的な基盤を提供します。パフォーマンスの最適化、柔軟性、包括的なドキュメントの組み合わせにより、あらゆるスキルレベルの開発者にとって貴重なツールになります。 ドキュメント、コードスニペット、コミュニティリソースを探索して、その最大限の潜在能力を解き放ちます。

よくある質問（言い換えられ、統合されています）：

Beansフレームワークは、パフォーマンスフォーカス、柔軟なグリッドシステム、事前に構築されたUIコンポーネント、および効率的なコンピレーションの低下により、WordPressテーマ開発に優れています。速度とカスタマイズの容易さに優先順位を付けることにより、他のフレームワークと好意的に比較されます。 eコマース（WooCommerceの互換性を備えた）など、さまざまなWebサイトタイプに適しており、レイアウト、機能、スタイリングのための幅広いカスタマイズオプションを提供します。 それは十分に文書化されており、支援的なコミュニティがあります。 豆は、最適化されたコード、アセットロード、画像圧縮などの組み込み機能を介してパフォーマンスを向上させます。 レスポンシブデザインをサポートし、包括的なドキュメントと事前に構築されたコンポーネントを備えた初心者がアクセスできます。 機能は、APIおよび事前に構築されたUIコンポーネントを介して追加されます。 サポートは、ドキュメント、コミュニティフォーラム、およびオンラインリソースを通じて入手できます。

以上がBeans Frameworkを使用したより高速なWordPressテーマ開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。