僅使用 CSS 將砌體和網格佈局添加到您的 WordPress 網站
已發表: 2014-07-09曾經想要讓您的帖子在 WordPress 主頁和檔案中的顯示方式更加有趣嗎？
如果您可以使用 masonry (Pinterest) 方法或網格佈局來顯示您的帖子，只需添加一段 CSS 代碼會怎樣？
沒有插件、簡碼、模板更改、將頁面分配為主頁。 只是純 CSS。
繼續閱讀，或使用以下鏈接跳轉：
- 為您的站點添加砌體和網格佈局的準備工作
- 為您的帖子提供 Pinterest 砌體外觀
- 在網格中佈置帖子
- 將自定義 CSS 添加到您的站點
為您的 WordPress 網站添加砌體和網格佈局的準備工作
這些解決方案完全基於 CSS，因此毫不奇怪，它們在很大程度上依賴於您網站上的 HTML 標記，無需修改即可工作。
使用的 CSS 已使用默認主題進行設計（和測試）。 這意味著 CSS 有幾個期望：
- 描述頁麵類型（例如主頁、博客、存檔、搜索）的 body 元素上存在類
- 帖子列表是文章元素的集合，完整的標題包含在帶有內容 id 的 div 中
如果您使用默認主題，則無需修改即可使用 CSS。 即使您不這樣做，您也可能會發現您的主題使用了足夠相似的標記，您仍然可以按原樣使用 CSS。 例如，八十年代主題使用與默認主題幾乎相同的標記。
如果你的主題沒有使用相同的標記——最簡單的判斷方法是檢查頁面源中 CSS 中引用的類和 id——那麼你仍然可以使用 CSS，你只需要更改類和與您的標記相匹配的 ID。
選擇在哪裡應用樣式
您可能決定只想將您選擇的樣式應用於某些頁面。
WordPress 使這變得非常簡單，因為它將特定於頁面的類應用於正文元素，例如博客、主頁、存檔和搜索，因此您只需為每個相關類編寫 CSS 代碼。
例如，如果您只想將樣式應用於主頁，那麼您的 CSS 將如下所示：
body.blog article { styles go here... }
要將樣式應用於主頁和存檔（類別）頁面：
body.blog article, body.archive article { styles go here... }
要將樣式僅應用於搜索結果：
body.blog search { styles go here... }
同樣，這確實取決於您遵循 WordPress 主題建議的主題。
瀏覽器兼容性
作為 CSS3，這些技術不會適用於所有平台和瀏覽器。
我已經測試並確認它們可以在最新版本的 Chrome 和 Safari（都在 OS X 上）和 iOS（5+）上運行。 各種 CSS 網站也暗示 IE10 也不會有問題。
在這些瀏覽器（包括 IE9）之外，您的里程會有所不同，但值得記住的是，您當前的樣式是後備的，因此使用舊瀏覽器的訪問者根本不會注意到任何差異。
如果您發現這些樣式在未提及的平台（尤其是 Windows）上成功運行，請在評論中告訴我們。
足夠的免責聲明，然後，讓我們看看如何修飾您的帖子列表。
為您的帖子提供 Pinterest 砌體外觀
有很多 WordPress 主題和少數插件以 Pinterest 風格的磚石格式顯示帖子。 但是使用 CSS3，您可以簡單地向您的 WordPress 網站添加一些額外的樣式並獲得相同的效果。
這個解決方案的靈感來自 Rahul Arora 在 W3Bits 上的帖子，它基於 CSS3 對column屬性的支持。 此屬性將在定義的列數中拆分內容，雖然它的創建可能更多地受到報紙樣式跨列流動文本的想法的啟發，但它對於磚石佈局同樣有用。
/* Masonry Custom CSS */
/* Masonry container */
body.blog div#content, body.archive div#content {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
/* Masonry bricks or child elements */
body.blog article, body.archive article {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
padding: 1em;
width: 100%;
}
body.archive .archive-header, body.blog .paging-navigation, body.archive .paging-navigation {
background-color: #ffffff;
-webkit-column-span: all;
column-span: all;
}
在默認佈局中，帖子作為文章元素輸出，包裝在 div 中，id 為 content。
CSS：
1. 使用column-count屬性設置#content 包裝器的列數——在本例中為 4. 它還設置了column-gap 。 您會注意到 Firefox 和 Safari 使用了-moz-和-webkit- 。
2. 將文章元素變成磚塊，使用inline-block並將寬度設置為 100%。
3. 通過指定這些元素跨越所有列，確保頁眉和導航位於其自己的“行”中
為了保持整潔，您還可以考慮添加以下內容：
/* Some ad hoc CSS useful for many themes */
body.archive .site-content,
body.blog .site-content {
margin: 1em;
}
h1, h2, h3, h4, h5, h6, a {
-ms-word-wrap: break-word;
word-wrap: break-word;
}
這只是在內容周圍留出一個邊距，並確保標題中的長詞不會丟失格式（對任何主題都很有用，而不僅僅是這裡）。
使其響應
列方法的一個缺點是它會隨著屏幕尺寸變小而迅速退化。
我們想要做的是操縱列的數量，以便文章元素獲得合理的屏幕空間，以保持磚塊的完整性和視覺吸引力。 因此，讓我們添加一些媒體查詢來根據屏幕大小更改列數：
@media only screen and (max-width : 1024px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (max-width : 768px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (max-width : 480px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
如您所見，我們只需要更改每個查詢的column-count屬性（及其派生詞）。
這 4 個斷點，其中 3 個適用於所有平台（只需調整瀏覽器窗口的大小即可看到它們生效），1 個專門用於縱向模式的平板電腦。
這是 iPad 和 iPhone 上的砌體樣式：
當然，您可以（並且應該）更進一步，為磚塊添加更多樣式以提高視覺吸引力，但只需 3 個 CSS 語句即可將您的帖子列表變成磚石牆，這令人印象深刻！
在網格中佈置帖子
如果您喜歡比砌體提供的更多的統一性和秩序，那麼您可能有興趣在網格中佈置您的帖子。
網格非常非常容易實現，但當特色圖像大小相同時效果最佳，否則您可能會以大量空白填充較短的“單元格”。
這一次 CSS 更短，只依賴於文章元素的樣式：
/* Grid Layout Custom CSS */
body.blog article, body.archive article {
width: 32.5%;
display: inline-block;
vertical-align: top;
text-align: left;
margin-bottom: 10px;
position: relative;
}
這就是絕對必要的。 同樣，我們正在使用inline-block並確保文章內容（標題、特色圖片、摘錄）垂直對齊。
重要的屬性是寬度，因為它決定了“列”的數量。 我使用 32.5% 作為初始值（使用 33% 會導致過早換行），這將提供 3 列。 顯然，如果你想要 4 列，那麼你會使用 24.5%，5 列 19.5%，等等。
添加響應性
就像我們的磚石造型一樣，如果要保持其有效性，網格將需要響應。
因為它是決定列數的寬度屬性，所以這就是將在各種媒體查詢中更改的屬性。
@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
body.blog article, body.archive article {
width: 49%;
}
}
@media only screen and (max-width : 768px) {
body.blog article, body.archive article {
width: 49%;
}
}
@media only screen and (max-width : 480px) {
body.blog article, body.archive article {
width: 100%;
}
}
這次只有 3 個查詢，因為我只從 3 列開始。 如果您決定從更多列開始，那麼您可能需要添加一個斷點 max-width: 1024px 以將寬度設置為 32.5%（3 列）。
這將導致：
- 平板電腦縱向模式下的 2 列
- 屏幕尺寸最大寬度為 768px 時為 2 列
- 屏幕尺寸最大寬度為 480px 時為 1 列
這些斷點將涵蓋平板電腦和智能手機以及瀏覽器窗口的大小調整。
這是 iPad 和 iPhone 上的網格佈局：
網格比磚石更有序，但在特色圖像尺寸方面確實需要一致性和嚴謹性才能發揮最大作用。
將自定義 CSS 添加到您的站點
將您選擇的自定義 CSS 注入您的 WordPress 網站時，有多種選擇。 如果您的主題不包括添加自定義 CSS 的功能，那麼您的選擇是：
- 子主題- 創建子主題並將 CSS 添加到樣式表
- 插件- 將您選擇的樣式添加到新的 CSS 文件並創建一個插件，該插件使用 wp-enqueue-style 函數，可能有條件地基於正在生成的頁面，將新文件加入隊列
- 編輯當前主題的樣式表——不要，真的，只是不要
- 使用自定義 CSS 插件- 有許多插件允許您通過 WordPress 管理界面將自定義 CSS 添加到您的站點（恰當地命名為簡單自定義 CSS 插件就是這樣一個插件）
我喜歡使用自定義 CSS 插件。 它設置起來快速簡單，讓測試變得輕而易舉，從您的 WordPress 網站中刪除 CSS 也同樣快速和容易（清除編輯器或卸載插件）。
CSS，通往 WordPress Zen 的途徑
精彩的 CSS Zen Garden 多年來一直在證明，網站的外觀和感覺可以在不改變標記的情況下通過改變 CSS 來大幅改變。
雖然不在同一水平上，但這兩種技術證明了改變 WordPress 網站的外觀和感覺也是完全可能的，無需更改模板、使用簡碼或開發子主題。
只是一點點CSS。
編者註：這篇文章已經更新，以確保准確性和相關性。 [最初發布：2014 年 7 月 / 修訂：2022 年 2 月]
標籤：