創建 WordPress 循環並自定義 CSS

已發表: 2022-10-24

假設您已完成第 1 部分，在本節中，我們將創建WordPress 循環並自定義 CSS。 WordPress 循環是 WordPress 用於在您的網站上顯示內容的 PHP 代碼。 為了編輯循環，您需要熟悉 PHP。 如果你不是，網上有很多資源可以幫助你學習基礎知識。 當您對 PHP 有了基本的了解後，打開您的文本編輯器並創建一個名為 loop.php 的新文件。 在這個文件中，我們將創建 WordPress 循環。 您需要做的第一件事是告訴 WordPress 加載我們在第 1 部分中創建的 header.php 文件。將以下代碼添加到 loop.php： 接下來，我們需要創建 WordPress 循環。 該循環負責顯示您網站上的所有內容。 它通過遍歷 WordPress 數據庫中的所有帖子並將它們顯示在頁面上來實現這一點。 要創建循環，請將以下代碼添加到 loop.php： 此代碼檢查 WordPress 數據庫中是否有任何帖子。 如果有帖子，它將遍歷每個帖子並將其顯示在頁面上。 現在我們已經設置了循環，我們需要在其中添加一些內容。 對於這個例子，我們將只顯示每篇文章的標題和內容。 在循環中添加以下代碼： 此代碼顯示每個帖子的標題和內容。 現在我們已經設置了循環，我們需要添加一些 CSS 來設置它的樣式。 在您的文本編輯器中，創建一個名為 style.css 的新文件。 將以下代碼添加到 style.css： .post { margin-bottom: 40px; 這段代碼在每篇文章的底部添加了一個邊距。 這將有助於分隔頁面上的帖子。 現在我們已經設置了循環和 CSS，我們需要向我們的主題添加更多文件。 在您的文本編輯器中，創建一個名為 footer.php 的新文件。 將以下代碼添加到腳註

（第 2 部分）Bootstrap 為 WordPress 主題做了什麼，以及為什麼它如此受歡迎。 本教程是一系列教程的第二部分，它將引導您完成使用 Bootstrap CSS 框架從頭開始創建 WordPress 主題的過程。 這是我們關於創建頁眉區域、導航、側邊欄和頁腳區域的討論的第三部分，也是最後一部分。 要將博客標記為活動，標語和博客名稱現在將顯示在頁面頂部。 在頁腳區域，將有一個名為頁腳 - 版權文本的小部件。 以下是將本節合併到 WordPress 中的幾個選項。 通過向其添加額外的小部件和小部件區域來對 WordPress 主題進行小部件化。

要啟動 bootstrapstarter_widgets_init() 函數，請將以下行添加到 footer.php 文件：footer-copyright-text 和 sidebar-module-inset。 這裡有兩個側邊欄：一個具有灰色背景，另一個具有黑色背景。 當您第一次查看入門模板時，小部件頂部小部件 (About) 會出現橙色背景，如果您輸入標題，它將自動包裹在 h4 標籤中。 使用 dynamic_sidebar() 我們可以顯示分配給稱為頁腳 - 版權文本的區域的小部件。 使用本分步教程中的分步說明創建功能齊全的博客側邊欄。 最終的 index.php 文件包含結果：Results 函數，可以在博客區域之後找到。 這是論文的最終版本，可在此處下載。

它還提供了針對導航欄和側邊欄的CSS 修復和調整。 在此頁面上，您可能會遇到外部附屬鏈接，如果您使用它們，可能會導致向 LyraThemes.com 支付佣金。 我們對本頁上的書面意見或評論不作任何陳述或聲明。

我們可以在 WordPress 中使用 Bootstrap 主題嗎？

學分：Colorlib

在 WordPress 中使用 Bootstrap 的最簡單方法是激活已經支持它的響應式主題。 使用 Bootstrap，您無需從主題開發人員處下載或安裝即可使用它，因為該框架包含在他們的許多主題中。

主題或插件安裝並不像使用 WordPress 創建Bootstrap 網站那麼簡單。 要創建 WordPress 主題，您必須擁有 WordPress 託管帳戶。 通過利用 Bootstrap 作為基礎，WordPress 和 Bootstrap 可以協同工作。 許多技術細節都隱藏在兩個系統的用戶友好界面下。 您將無法經常從頭開始構建 WordPress 主題。 要了解基於 Bootstrap 的 WordPress 主題，請從以前的版本中復制一些必要的文件。 主題將被稱為 WPBootstrap 並且目錄將被賦予相同的名稱（小寫）。

如何將 Bootstrap 添加到 WordPress 主題？ 有幾種選擇。 以下是您可以合併到 header.php 和 footer.php 文件中的 Bootstrap CSS 和 JavaScript 庫。 通過將預覽圖像上傳到主題目錄，然後使用 screenshot.png 文件，可以將預覽圖像添加到主題中。 創建 WordPress 主題需要大量工作，因此我建議從另一個主題複製文件。 因為 Bootstrap 有自己的一套規則和實踐，所以也必須遵循學習它們的程序。 事實上，WordPress 和 Bootstrap 都有熱情的社區，所以你永遠不知道接下來會發生什麼。

Bootstrap 比 WordPress 好嗎？

信用：模板烤麵包機

如果您剛剛開始並且對網頁設計知之甚少，那麼使用 Bootstrap 是一個好主意，因為它易於學習和使用。 如果您想提高網站設計技能，WordPress 可能是更好的選擇。

在開發網站時，很難在 Bootstrap 和 WordPress 之間做出選擇。 在這裡，我們將對 Bootstrap 和 WordPress 進行快速比較，並對其進行全面細分。 使用這種方法，您可以決定最適合您網站的平台。 Bootstrap 網站的加載成本低於 WordPress 網站。 可以從任何設備訪問使用 Bootstrap 構建的網站。 最好的 WordPress 網站在大屏幕上效果最好，無論是在個人電腦、平板電腦還是筆記本電腦上。 您必須是一名程序員才能在 Bootstrap 中為您的網站或頁面進行頁面搜索引擎優化。

React-Bootstrap 是一個結合了 React 的強大功能和 Bootstrap 的靈活性的庫。 Bootstrap 4 是一個強大的平台，具有響應式設計、一致的設計以及它所缺乏的所有功能。 啟動和運行不會有任何問題，因為它使用起來非常簡單，學習起來也很簡單。 React-Bootstrap 是一個出色的庫，用於創建高質量、響應式的 Web 應用程序。