如何在 WordPress 中使用 Masonry 添加 Pinterest 風格的文章網格佈局

02/16/2024

步驟 1:將必要的庫添加到主題中

首先,您需要使用以下代碼將 Masonry 加載到您的主題中:

if (! function_exists('slug_scripts_masonry') ) : if ( ! is_admin() ) : function slug_scripts_masonry() { wp_enqueue_script('masonry'); wp_enqueue_style('masonry’, get_template_directory_uri().'/css/’); } add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' ); endif; //! is_admin() endif; //! slug_scripts_masonry exists 

這段代碼加載了 Masonry 並使其可供您的主題模板文件使用。

步驟 2:初始化 JavaScript

下一個函數設置了 Masonry,定義了將與其一起使用的容器,並確保所有操作按正確順序進行。以下是頁腳輸出的初始化腳本:

if ( ! function_exists( 'slug_masonry_init' )) : function slug_masonry_init() { ?>

步驟 3:創建 Masonry 循環

創建一個名為 “content-masonry.php” 的新文件並將其添加到您的主題中,這將允許您將 Masonry 循環添加到任何不同的模板中。以下是代碼:



Related Posts

  • 2024-07-20
  • WordPress 主题

您是否想在 WordPress 中為不同頁面使用多個佈景主題?可以自訂網頁的外觀和布局,為文章、頁面和部分區域建立模板。但是如果您想為網站的某些部分或頁面使用完全不同的佈景主題呢?本文將指導您如何在 WordPress 中為頁面使用多個佈景主題。

閱讀更多
  • 2024-07-19
  • WordPress 主题

您是否想在 WordPress 網站上添加回頂效果?這種效果在頁面較長時非常有用,可以讓用戶輕鬆返回頁面頂部,提升網站的用戶體驗。本文將教您如何使用 jQuery 和插件在 WordPress 中添加平滑回頂效果。

閱讀更多
  • 2024-07-13
  • WordPress 主题

您是否想在 WordPress 中創建一個自定義頁面?自定義頁面允許您使用與網站其餘部分不同的佈局。許多 WordPress 網站使用自定義頁面佈局來建立銷售頁面、登陸頁面、網路研討會頁面等。在這篇文章中,我們將向您展示如何輕鬆地在 WordPress 中創建自定義頁面。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>