亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

目錄
為什麼WordPress開發(fā)者應(yīng)該關(guān)注Tailwind
Tailwind和WordPress協(xié)同工作的方面
帶有最小Tailwind CSS集成的最小WordPress主題
將TailwindCSS添加到現(xiàn)有主題
從頭開始
首頁(yè) web前端 css教學(xué) 將CSS添加到新的和現(xiàn)有的WordPress主題

將CSS添加到新的和現(xiàn)有的WordPress主題

Mar 13, 2025 pm 01:00 PM

Adding Tailwind CSS to New and Existing WordPress Themes

自從我開始製作WordPress網(wǎng)站以來(lái),大約15年裡,沒有什麼比在我的工作流程中添加Tailwind CSS對(duì)我的生產(chǎn)力以及我對(duì)前端開發(fā)的享受程度影響更大(而且差距很大)。

當(dāng)我開始使用Tailwind時(shí),GitHub上有一個(gè)最新的、第一方存儲(chǔ)庫(kù),描述瞭如何在WordPress中使用Tailwind。該存儲(chǔ)庫(kù)自2019年以來(lái)就沒有更新過(guò)。但缺乏更新並非說(shuō)明Tailwind對(duì)WordPress開發(fā)人員的實(shí)用性。通過(guò)讓Tailwind發(fā)揮其最佳作用,同時(shí)讓W(xué)ordPress仍然是WordPress,可以利用這兩個(gè)平臺(tái)的最佳部分,並在更短的時(shí)間內(nèi)構(gòu)建現(xiàn)代網(wǎng)站。

本文中的最小設(shè)置示例旨在對(duì)原始設(shè)置存儲(chǔ)庫(kù)進(jìn)行更新,修改為與最新版本的Tailwind和WordPress兼容。這種方法可以擴(kuò)展到各種WordPress主題,從派生的默認(rèn)主題到完全自定義的主題。

為什麼WordPress開發(fā)者應(yīng)該關(guān)注Tailwind

在我們討論設(shè)置之前,值得回顧一下Tailwind的工作原理以及它在WordPress環(huán)境中的含義。

Tailwind允許您使用預(yù)先存在的實(shí)用程序類來(lái)設(shè)置HTML元素的樣式,從而無(wú)需您自己編寫大部分或全部網(wǎng)站的CSS。 (想想像hidden用於display: hiddenuppercase用於text-transform: uppercase這樣的類。)如果您過(guò)去使用過(guò)Bootstrap和Foundation等框架,那麼您在Tailwind CSS中會(huì)發(fā)現(xiàn)的最大區(qū)別在於其對(duì)設(shè)計(jì)的空白石板方法以及僅為CSS的輕量級(jí)特性,默認(rèn)情況下只包含CSS重置。這些屬性允許高度優(yōu)化的網(wǎng)站,而不會(huì)將開發(fā)人員推向框架本身內(nèi)置的美學(xué)。

此外,與許多其他CSS框架不同,無(wú)法從現(xiàn)有的CDN加載Tailwind CSS的“標(biāo)準(zhǔn)”構(gòu)建。由於包含了所有實(shí)用程序類,生成的CSS文件將過(guò)於龐大。 Tailwind提供了一個(gè)“Play CDN”,但它並非用於生產(chǎn)環(huán)境,因?yàn)樗鼤?huì)顯著降低Tailwind的性能優(yōu)勢(shì)。 (但是,如果您想進(jìn)行快速原型設(shè)計(jì)或以其他方式試驗(yàn)Tailwind而無(wú)需實(shí)際安裝它或設(shè)置構(gòu)建過(guò)程,它確實(shí)非常方便。)

這種需要使用Tailwind的構(gòu)建過(guò)程來(lái)創(chuàng)建特定於您的項(xiàng)目的框架實(shí)用程序類的子集,使得理解Tailwind如何決定包含哪些實(shí)用程序類以及此過(guò)程如何影響在WordPress編輯器中使用實(shí)用程序類變得非常重要。

最後,Tailwind積極的預(yù)檢(其CSS重置版本)意味著WordPress的某些部分與其默認(rèn)設(shè)置並不完全適合該框架。

讓我們首先看看Tailwind在WordPress中哪些方面運(yùn)行良好。

Tailwind和WordPress協(xié)同工作的方面

為了讓Tailwind在沒有大量自定義的情況下良好運(yùn)行,它需要充當(dāng)給定頁(yè)面的主要CSS;這消除了WordPress中許多用例。

例如,如果您正在構(gòu)建一個(gè)WordPress插件,並且需要包含前端CSS,那麼Tailwind的預(yù)檢將與活動(dòng)主題直接衝突。同樣,如果您需要設(shè)置WordPress管理區(qū)域(編輯器外部)的樣式,則管理區(qū)域自己的樣式可能會(huì)被覆蓋。

有幾種方法可以解決這兩個(gè)問(wèn)題:您可以禁用預(yù)檢並為所有實(shí)用程序類添加前綴,或者您可以使用PostCSS為所有選擇器添加命名空間。無(wú)論哪種方式,您的配置和工作流程都將變得更加複雜。

但是,如果您正在構(gòu)建主題,Tailwind可以直接使用。我已經(jīng)成功地使用經(jīng)典編輯器和塊編輯器創(chuàng)建了自定義主題,並且我相信隨著全站編輯的成熟,將會(huì)有許多全站編輯功能與Tailwind良好協(xié)同工作。

在她的博客文章“Gutenberg全站編輯不必是完整的”中,Tammie Lister將全站編輯描述為可以部分或全部採(cǎi)用的獨(dú)立功能集。全站編輯的全局樣式功能不太可能與Tailwind一起使用,但許多其他功能可能會(huì)。

因此:您正在構(gòu)建一個(gè)主題,Tailwind已安裝並配置,並且您正在面帶笑容地添加實(shí)用程序類。但是這些實(shí)用程序類會(huì)在WordPress編輯器中工作嗎?

通過(guò)規(guī)劃,可以!只要您提前決定要使用哪些實(shí)用程序類,實(shí)用程序類就可以在編輯器中使用。您無(wú)法打開編輯器並使用任何和所有Tailwind實(shí)用程序類;Tailwind對(duì)性能的強(qiáng)調(diào)內(nèi)置了僅包含主題使用的實(shí)用程序類的限制,因此您需要提前讓Tailwind知道哪些實(shí)用程序類在編輯器中需要,即使它們?cè)诖a的其他地方不存在。

有許多方法可以做到這一點(diǎn):您可以在Tailwind配置文件中創(chuàng)建一個(gè)安全列表;您可以在要使用塊編輯器設(shè)置樣式的自定義塊的代碼旁邊包含包含類列表的註釋;您甚至可以只創(chuàng)建一個(gè)文件,列出所有特定於編輯器的類,並告訴Tailwind將其作為它監(jiān)視類名的源文件之一。

提前確定編輯器類對(duì)我來(lái)說(shuō)從未成為工作的障礙,但這仍然是我被問(wèn)到最多關(guān)於Tailwind和WordPress之間關(guān)係的方面。

帶有最小Tailwind CSS集成的最小WordPress主題

讓我們從盡可能基本的WordPress主題開始。只有兩個(gè)必需文件:

  • style.css
  • index.php

我們將使用Tailwind生成style.css。對(duì)於index.php,讓我們從簡(jiǎn)單的東西開始:

 <?php /**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * Eg, it puts together the home page when no home.php file exists.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */

get_header();
?>

<main id="site-content" role="main">

    <?php if ( have_posts() ) {

        while ( have_posts() ) {
            the_post();

            get_template_part( &#39;template-parts/content&#39;, get_post_type() );

        }

    } else {

        get_template_part( &#39;template-parts/content&#39;, &#39;none&#39; );

    }
    ?>

</main><!-- #site-content -->

<?php get_footer(); ?>

有很多事情WordPress主題應(yīng)該做,而上面的代碼沒有做——比如分頁(yè)、帖子縮略圖、使用鏈接元素而不是排隊(duì)樣式表等等——但這足以顯示一個(gè)帖子並測(cè)試Tailwind是否按預(yù)期工作。

在Tailwind方面,我們需要三個(gè)文件:

  • package.json
  • tailwind.config.js
  • Tailwind的輸入文件

在我們繼續(xù)之前,您需要npm。如果您不習(xí)慣使用它,我們有一個(gè)npm入門指南,這是一個(gè)不錯(cuò)的起點(diǎn)!

由於還沒有package.json文件,我們將通過(guò)在終端中運(yùn)行以下命令,在與index.php相同的文件夾中創(chuàng)建一個(gè)空的JSON文件:

 echo {} > ./package.json

有了這個(gè)文件,我們就可以安裝Tailwind了:

 npm install tailwindcss --save-dev

並生成我們的Tailwind配置文件:

 npx tailwindcss init

在我們的tailwind.config.js文件中,我們只需要告訴Tailwind在我們的PHP文件中搜索實(shí)用程序類:

 module.exports = {
  content: ["./**/*.php"],
  theme: {
    extend: {},
  },
  plugins: [],
}

如果我們的主題使用了Composer,我們想忽略vendor目錄,可以通過(guò)向content數(shù)組添加類似"!**/vendor/**"的內(nèi)容來(lái)實(shí)現(xiàn)。但是,如果所有PHP文件都是主題的一部分,那麼上面的內(nèi)容將有效!

我們可以將輸入文件命名為我們想要的任何名稱。讓我們創(chuàng)建一個(gè)名為tailwind.css的文件,並向其中添加以下內(nèi)容:

 /*!
Theme Name: WordPress Tailwind
*/

@tailwind base;
@tailwind components;
@tailwind utilities;

頂部的註釋是WordPress識(shí)別主題所必需的;三個(gè)@tailwind指令添加了Tailwind的每一層。

就是這樣!我們現(xiàn)在可以運(yùn)行以下命令:

 npx tailwindcss -i ./tailwind.css -o ./style.css --watch

這告訴Tailwind CLI使用tailwind.css作為輸入文件來(lái)生成我們的style.css文件。 --watch標(biāo)誌將在項(xiàng)目存儲(chǔ)庫(kù)中的任何PHP文件中添加或刪除實(shí)用程序類時(shí)持續(xù)重建style.css文件。

這就像一個(gè)Tailwind驅(qū)動(dòng)的WordPress主題一樣簡(jiǎn)單,但它不太可能是您想部署到生產(chǎn)環(huán)境的東西。因此,讓我們討論一些通往生產(chǎn)就緒主題的途徑。

將TailwindCSS添加到現(xiàn)有主題

您可能想要將Tailwind CSS添加到已經(jīng)擁有自己的原生CSS的現(xiàn)有主題的原因有兩個(gè):

  • 試驗(yàn)將Tailwind組件添加到已設(shè)置樣式的主題中
  • 將主題從原生CSS轉(zhuǎn)換為Tailwind

我們將通過(guò)在Twenty Twenty-One(WordPress默認(rèn)主題)中安裝Tailwind來(lái)演示這一點(diǎn)。 (為什麼不是Twenty Twenty-Two?最新的WordPress默認(rèn)主題旨在展示全站編輯,不適合Tailwind集成。)

首先,如果您的開發(fā)環(huán)境中沒有安裝該主題,您應(yīng)該下載並安裝它。之後我們只需要遵循以下幾個(gè)步驟:

  • 在終端中導(dǎo)航到主題文件夾。
  • 因?yàn)門wenty Twenty-One已經(jīng)擁有自己的package.json文件,所以無(wú)需創(chuàng)建新的文件即可安裝Tailwind:
 npm install tailwindcss --save-dev
  • 添加您的tailwind.config.json文件:
 npx tailwindcss init
  • 將您的tailwind.config.json文件更新為與上一節(jié)中的文件相同。
  • 將Twenty Twenty-One現(xiàn)有的style.css文件複製到tailwind.css。

現(xiàn)在我們需要將三個(gè)@tailwind指令添加到tailwind.css文件中。我建議您按如下方式構(gòu)造tailwind.css文件:

 /* WordPress主題文件頭在這裡。 */

@tailwind base;

/* 所有現(xiàn)有CSS都在這裡。 */

@tailwind components;
@tailwind utilities;

將基層立即放在主題標(biāo)題之後,可以確保WordPress繼續(xù)檢測(cè)您的主題,同時(shí)還可以確保Tailwind CSS重置盡可能早地出現(xiàn)在文件中。

所有現(xiàn)有的CSS都位於基層之後,確保這些樣式優(yōu)先於重置。

最後,組件和實(shí)用程序?qū)泳o隨其後,因此它們可以優(yōu)先於任何具有相同特異性的CSS聲明。

現(xiàn)在,與我們的最小主題一樣,我們將運(yùn)行以下命令:

 npx tailwindcss -i ./tailwind.css -o ./style.css --watch

現(xiàn)在您的新的style.css文件每次更改PHP文件時(shí)都會(huì)生成,您應(yīng)該檢查修改後的主題與原始主題的細(xì)微渲染差異。這些是由Tailwind的CSS重置引起的,它比某些主題可能預(yù)期的重置得更徹底一些。對(duì)於Twenty Twenty-One,我做的唯一修改是向a元素添加text-decoration-line: underline。

解決了渲染問(wèn)題後,讓我們添加來(lái)自Tailwind UI(Tailwind的第一方組件庫(kù))的Header Banner組件。從Tailwind UI網(wǎng)站複製代碼,並將其粘貼到header.php中“跳至內(nèi)容”鏈接之後:

非常好!因?yàn)槲覀儸F(xiàn)在將要使用實(shí)用程序類來(lái)覆蓋內(nèi)置於主題中的一些現(xiàn)有的更高特異性的類,所以我們將向tailwind.config.js文件添加一行:

 module.exports = {
  important: true,
  content: ["./**/*.php"],
  theme: {
    extend: {},
  },
  plugins: [],
}

這將所有Tailwind CSS實(shí)用程序標(biāo)記為!important,以便它們可以覆蓋具有更高特異性的現(xiàn)有類。 (我從未在生產(chǎn)環(huán)境中將important設(shè)置為true,但如果我正在將網(wǎng)站從原生CSS轉(zhuǎn)換為Tailwind,我?guī)缀蹩隙〞?huì)這樣做。)

通過(guò)向“了解更多”鏈接添加一個(gè)快速的no-underline類,並向關(guān)閉按鈕添加bg-transparent和border-0,我們就完成了:

看到Tailwind UI的組件合併到WordPress默認(rèn)主題中看起來(lái)有點(diǎn)刺眼,但這很好地演示了Tailwind組件及其固有的可移植性。

從頭開始

如果您使用Tailwind創(chuàng)建一個(gè)新主題,您的過(guò)程將與上面的最小示例非常相似。您可能不希望直接從命令行運(yùn)行Tailwind CLI,而是可能希望為開發(fā)和生產(chǎn)構(gòu)建創(chuàng)建單獨(dú)的npm腳本,並監(jiān)視更改。您可能還希望為WordPress編輯器創(chuàng)建一個(gè)單獨(dú)的構(gòu)建。

如果您正在尋找一個(gè)超越上面最小示例的起點(diǎn)——但不會(huì)超出它本身俱有其自以為是的樣式的程度——我已經(jīng)創(chuàng)建了一個(gè)Tailwind優(yōu)化的WordPress主題生成器,靈感來(lái)自Underscores(_s),曾經(jīng)是規(guī)範(fàn)的WordPress啟動(dòng)主題。名為_tw,這是我希望在我第一次將Tailwind與WordPress結(jié)合使用時(shí)擁有的快速入門。它仍然是我所有客戶項(xiàng)目的第一步。

如果您願(yuàn)意進(jìn)一步偏離典型WordPress主題的結(jié)構(gòu),並將Laravel Blade模板添加到您的工具包中,Sage是一個(gè)不錯(cuò)的選擇,他們有一個(gè)針對(duì)Tailwind的設(shè)置指南來(lái)幫助您入門。

無(wú)論您選擇如何開始,我都鼓勵(lì)您花一些時(shí)間來(lái)適應(yīng)Tailwind CSS,並使用實(shí)用程序類來(lái)設(shè)置HTML文檔的樣式:起初它可能感覺不尋常,但您很快就會(huì)發(fā)現(xiàn)自己比以前承擔(dān)更多的客戶工作,因?yàn)槟鷺?gòu)建網(wǎng)站的速度比以前更快——而且希望,像我一樣,在做的過(guò)程中更有樂(lè)趣。

以上是將CSS添加到新的和現(xiàn)有的WordPress主題的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章!

本網(wǎng)站聲明
本文內(nèi)容由網(wǎng)友自願(yuàn)投稿,版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容,請(qǐng)聯(lián)絡(luò)admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費(fèi)脫衣圖片

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅(qū)動(dòng)的應(yīng)用程序,用於創(chuàng)建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費(fèi)的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費(fèi)的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強(qiáng)大的PHP整合開發(fā)環(huán)境

Dreamweaver CS6

Dreamweaver CS6

視覺化網(wǎng)頁(yè)開發(fā)工具

SublimeText3 Mac版

SublimeText3 Mac版

神級(jí)程式碼編輯軟體(SublimeText3)

CSS教程,用於創(chuàng)建加載旋轉(zhuǎn)器和動(dòng)畫 CSS教程,用於創(chuàng)建加載旋轉(zhuǎn)器和動(dòng)畫 Jul 07, 2025 am 12:07 AM

創(chuàng)建CSS加載旋轉(zhuǎn)器的方法有三種:1.使用邊框的基本旋轉(zhuǎn)器,通過(guò)HTML和CSS實(shí)現(xiàn)簡(jiǎn)單動(dòng)畫;2.使用多個(gè)點(diǎn)的自定義旋轉(zhuǎn)器,通過(guò)不同延遲時(shí)間實(shí)現(xiàn)跳動(dòng)效果;3.在按鈕中添加旋轉(zhuǎn)器,通過(guò)JavaScript切換類來(lái)顯示加載狀態(tài)。每種方法都強(qiáng)調(diào)了設(shè)計(jì)細(xì)節(jié)如顏色、大小、可訪問(wèn)性和性能優(yōu)化的重要性,以提升用戶體驗(yàn)。

解決CSS瀏覽器兼容性問(wèn)題和前綴 解決CSS瀏覽器兼容性問(wèn)題和前綴 Jul 07, 2025 am 01:44 AM

處理CSS瀏覽器兼容性和前綴問(wèn)題需理解瀏覽器支持差異並合理使用廠商前綴。 1.了解常見問(wèn)題如Flexbox、Grid支持不一,position:sticky失效,動(dòng)畫表現(xiàn)不同;2.查閱CanIuse確認(rèn)特性支持情況;3.正確使用-webkit-、-moz-、-ms-、-o-等廠商前綴;4.推薦使用Autoprefixer自動(dòng)添加前綴;5.安裝PostCSS並配置browserslist指定目標(biāo)瀏覽器;6.構(gòu)建時(shí)自動(dòng)處理兼容性;7.老項(xiàng)目可用Modernizr檢測(cè)特性;8.不必追求所有瀏覽器一致,確

造型與CSS不同訪問(wèn)的鏈接 造型與CSS不同訪問(wèn)的鏈接 Jul 11, 2025 am 03:26 AM

設(shè)置訪問(wèn)過(guò)鏈接的樣式能提升用戶體驗(yàn),尤其在內(nèi)容密集型網(wǎng)站中幫助用戶更好導(dǎo)航。 1.使用CSS的:visited偽類可定義已訪問(wèn)鏈接樣式,如顏色變化;2.注意瀏覽器出於隱私限制僅允許修改部分屬性;3.顏色選擇應(yīng)與整體風(fēng)格協(xié)調(diào),避免突兀;4.移動(dòng)端可能不顯示該效果,建議結(jié)合其他視覺提示如icon輔助標(biāo)識(shí)。

使用CSS剪輯路徑創(chuàng)建自定義形狀 使用CSS剪輯路徑創(chuàng)建自定義形狀 Jul 09, 2025 am 01:29 AM

使用CSS的clip-path屬性可以裁剪元素為自定義形狀,如三角形、圓形缺口、多邊形等,無(wú)需依賴圖片或SVG。其優(yōu)勢(shì)包括:1.支持circle、ellipse、polygon等多種基本形狀;2.可響應(yīng)式調(diào)整,適配移動(dòng)端;3.易於動(dòng)畫化,可結(jié)合hover或JavaScript實(shí)現(xiàn)動(dòng)態(tài)效果;4.不影響佈局流,僅裁剪顯示區(qū)域。常見用法如圓形裁剪clip-path:circle(50pxatcenter)和三角形裁剪clip-path:polygon(50%0%,1000%,00%)。注意

顯示:內(nèi)聯(lián),顯示:塊和顯示:內(nèi)聯(lián)塊之間有什麼區(qū)別? 顯示:內(nèi)聯(lián),顯示:塊和顯示:內(nèi)聯(lián)塊之間有什麼區(qū)別? Jul 11, 2025 am 03:25 AM

Themaindifferencesbetweendisplay:inline,block,andinline-blockinHTML/CSSarelayoutbehavior,spaceusage,andstylingcontrol.1.Inlineelementsflowwithtext,don’tstartonnewlines,ignorewidth/height,andonlyapplyhorizo????ntalpadding/margins—idealforinlinetextstyling

CSS繪畫API是什麼? CSS繪畫API是什麼? Jul 04, 2025 am 02:16 AM

thecsspaintingapienablesdemimageGenerationinCsssingJavascript.1.developersCreateApaintWorkletClassWithaPaint()method.2.theyregisteritviaregisterpaint()。 3.thecustompAntFunctionSthenusitySthenusedisthenusedisthenusedIncerspropertieslikeBacknockforg-image-image.thisallows.thisallowsforderforderynamecvis

如何使用CSS創(chuàng)建響應(yīng)式圖像? 如何使用CSS創(chuàng)建響應(yīng)式圖像? Jul 15, 2025 am 01:10 AM

要使用CSS創(chuàng)建響應(yīng)式圖片,主要可通過(guò)以下方法實(shí)現(xiàn):1.使用max-width:100%和height:auto讓圖片在保持比例的同時(shí)自適應(yīng)容器寬度;2.結(jié)合HTML的srcset和sizes屬性智能加載適配不同屏幕的圖片源;3.利用object-fit和object-position控製圖片裁剪與焦點(diǎn)展示。這些方法共同確保圖片在不同設(shè)備上清晰、美觀地呈現(xiàn)。

什麼是CSS,它代表什麼? 什麼是CSS,它代表什麼? Jul 03, 2025 am 01:48 AM

CSS,orcascadingstylesheets,isthepartofwevelvermentThatControlsawebpage’svisualAppearance,包括colors,fonts,fonts,spacing,and spacing and layout

See all articles