検索
ホームページCMS チュートリアル&#&プレスSageでWordPressテーマ開発を近代化します

セージ:現代のWordPressテーマフレームワーク

数年前、WordPressテーマのフレームワークであるRootsを特集しました。 その後、ルーツは、セージとベッドロックという2つの強力なツールセットを提供する会社に進化しました。この記事では、Sageに焦点を当てています。Sageは、合理化されたWordPressテーマ開発のためのHTML5ボイラープレート、Gulp、Bower、およびBootstrapを活用するフレームワークです。これらのツール、インストール、カスタマイズ、および基本的なセージワークフローの概要については、

Modernizing WordPress Theme Development with Sage

セージの重要な利点:

HTML5ボイラープレート、Gulp、Bower、Bootstrapなどのツールを使用してWordPressテーマ開発を近代化し、効率的で応答性の高いテーマをもたらします。
    堅牢なビルドプロセスを通じて、資産管理と自動化を簡素化します。
  • ナビゲーションとカスタマイズを簡単にするための明確なディレクトリ構造を提供します。
  • さまざまなテーマの側面に広範なカスタマイズオプションを提供しています。
  • browsersyncを介してリアルタイムの更新でワークフローを合理化します。
  • 必須ツール:

html5ボイラープレート:しっかりした基盤を提供する堅牢なフロントエンドテンプレート。

    gulp:
  • マイニフィス、連結、画像の最適化、テストなどのタスク用の自動化ツール。 bower:
  • フロントエンド資産のパッケージマネージャー、JavaScriptライブラリの包含を簡素化します。
  • browsersync:複数のデバイスで同期されたファイルの変更と相互作用を有効にします。
  • Asset-Builder&Wiredep:資産収集と依存関係の噴射を支援します。
  • Bootstrap:
  • レスポンシブWebサイトを作成するための人気のあるフロントエンドフレームワーク。
  • インストール:
  • セージのインストールはGitを利用します。 WordPressテーマディレクトリに移動し、端末で次のコマンドを実行します(選択したテーマ名を
  • に置き換えます):
  • 代わりに、githubリポジトリからzipファイルをダウンロードし、抽出し、内容をWordPressテーマディレクトリ内の新しいフォルダーにコピーします。
次に、この行を

ファイルに追加して、開発モード用のWordPressを構成します:

テーマディレクトリ構造:theme-name

git clone https://github.com/roots/sage.git theme-name
Sageは、機能を強化するための追加を備えた標準のWordPressテーマ構造を維持しています:

  • コアファイル(index.phpfunctions.php404.phpなど)
  • libディレクトリ:テーマ構成とユーティリティファイルが含まれています(assets.phpinit.phptitles.php)。
  • ディレクトリ:JavaScriptおよびImage Assets。 assetsmain.cssディレクトリ:テーマ翻訳用の
  • ファイルが含まれています。
  • langsage.potディレクトリ:HTML5ボイラープレートベースのテンプレートを保持します
  • templatesカスタマイズ:

ファイルを介してセージをカスタマイズします。 重要なカスタマイズポイントには、次のものが含まれます

タイトルタグ:

を使用してタイトルタグの変更を有効/無効にします lib/init.php

ナビゲーションメニュー:
  • を使用してナビゲーションメニューを登録 add_theme_support('title-tag')サムネイル後のポスト:
  • 投稿フォーマット:register_nav_menus()
  • html5マークアップ: add_theme_support('post-thumbnails')
  • 編集者StyleSheet:
  • add_theme_support('post-formats')サイドバー:
  • 関数内でを使用してサイドバーを登録します。 add_theme_support('html5')
  • ワークフロー: add_editor_style()セージのワークフローは、node.jsおよびnpmパッケージに依存しています。 NPMを使用して必要なツールをインストールします:
  • bowerの使用:register_sidebar()widgets_init()
  • フロントエンドパッケージを管理するためにBowerコマンドを使用してください:

:パッケージを検索します。

:パッケージをインストールします。
git clone https://github.com/roots/sage.git theme-name

:インストールされたパッケージをリストします。

:パッケージをアンインストールします。

  • bower search <query></query>gulp:
  • の使用 bower install <package></package>gulpプラグインをインストール:
  • bower list実行
  • を実行して、資産をコンパイルして最適化します。
  • リアルタイムの更新を提供します。 bower uninstall <package></package>ファイルはビルドプロセスを制御します。 必要に応じてタスクと設定をカスタマイズして
  • および

結論:

Sageは、WordPressテーマ開発に対する強力で効率的なアプローチを提供します。最新のツールと合理化されたワークフローを活用することにより、開発者は高品質で応答性の高いテーマを簡単に作成できます。 この記事で提供されるプロセスとカスタマイズオプションの詳細な説明により、次のWordPressテーマプロジェクトにSageを効果的に利用できるようになります。

以上がSageでWordPressテーマ開発を近代化しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
WordPressでコンテンツを管理するのはどれくらい簡単ですか?WordPressでコンテンツを管理するのはどれくらい簡単ですか?May 09, 2025 am 12:11 AM

wordpressisuser-friendlyduetoitsIntutiveInterfaceandcms、それはfromdesign.itoffersarichtexteditorを使用することを検出するためにcreationAndialibraryfororganization.its flexivitiesisivedyvysencedancevancevencevencedemourthemoursemasensansandyansemas canimpactperomance

WordPressはビジネス設定でどのように使用されていますか?WordPressはビジネス設定でどのように使用されていますか?May 08, 2025 am 12:04 AM

wordpressisutableforbusinesssettings.1)ituportse-commercewithwoocommerce、productmanagementandpaymentprocessing.2)itservesasacmsforcoporateblogs、entancingseoandengagement.3)customizationibultiblewithwithwithsemesandplugins.3)

WordPressに適していないWebサイトは何ですか?WordPressに適していないWebサイトは何ですか?May 07, 2025 am 12:10 AM

wordpressisnotidealforhigh-trafficwebsites、customandcomplexApplications、セキュリティ感覚化、リアルチメダタプロセシング、および高地識別型インターフェース、forhhigh-trafficsites、usenext.jsorcustomsolutions; forplecluctlications、optfordjangaNgoRub

WordPressでブログを作成できますか?WordPressでブログを作成できますか?May 06, 2025 am 12:03 AM

はい、YouCanbuildAblogWithWordPress.1)BetWeenWordPress.comforbeginnersorwordpress.orgformorecontrol.2)SelectAtheMetopersuerizeUourBlog'slook.3)usepluginStoenHanceFunctionality、likeSeoandsocialmedientegreation.4)

WordPressはCMSプラットフォームとしてどのくらい安全ですか?WordPressはCMSプラットフォームとしてどのくらい安全ですか?May 05, 2025 am 12:01 AM

wordpresscanbesecureifmanagedperly.1)keepthewordpresscoreupdatedtopatchvulnerabilities.2)vetandupdatepluginsandとthemes from-reputabless.3)emforcestrongwordsandusetwo-factoruthentication.4)

WordPress CMSでどのようなWebサイトを構築できますか?WordPress CMSでどのようなWebサイトを構築できますか?May 04, 2025 am 12:06 AM

wordpresscanbuildvarioustypesofwebsites:1)personalblogs、easytosetupwithemesandplugins.2)businesswebuilders.3)e-ocommerceforseamlessIntegration.4)コミュニティサイトを使用しているe-ocommerceforseamlessintegration.4)

WordPressをCMSとして使用することの長所と短所は何ですか?WordPressをCMSとして使用することの長所と短所は何ですか?May 03, 2025 am 12:09 AM

wordpressisapowerfulcmswithsifisifistadvantageandChallenges.1)それは、suser-friendlyandcustomizable、yeal forbeginners.2)その増加性をカンロードすることを抱えています

WordPressは、他の人気のあるCMSプラットフォームと比較してどうですか?WordPressは、他の人気のあるCMSプラットフォームと比較してどうですか?May 02, 2025 am 12:18 AM

wordpressexcelsineaseofuseandaptaptability、makeitideal forbeginnersandsmalltomedium-sizedinesses.1)Easeofuse:wordpressisuser-frendly.2)セキュリティ:DrupalleadSwithSecurityFeatures.3)パフォーマンス:GhostoffersexcellencedueTonode.4)scal

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール