如何使用砌體在WordPress中添加Pinterest樣式發佈網格


這是Josh Pollock的來賓帖子

一段時間以來,類似Pinterest的帖子網格顯示一直是WordPress博客索引頁面的流行設計。 它之所以受歡迎,不僅是因為它模仿了流行的社交媒體網站的外觀,而且還因為它可以充分利用屏幕上的空間。 在WordPress博客索引上,它允許每個帖子預覽達到其自然所需的大小,而不會留下額外的空間。

在本教程中,我將向您展示如何使用流行的Masonry JavaScript庫為博客索引以及主題的存檔頁面創建級聯網格佈局。 我將解決您需要進行移動優化的一些問題以及如何解決這些問題。

WordPress中砌體網格佈局的屏幕截圖

注意:這是高級教程,適合那些喜歡編輯WordPress主題並且具有足夠的HTML / CSS知識的人。

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

更新資料:WordPress 3.9現在包括最新版本的Masonry。

首先,您需要使用以下代碼將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

此代碼僅加載砌體並將其提供給主題的模板文件(請參閱有關如何在WordPress中正確添加JavaScript和样式的指南)。 還要注意,我們都沒有將jQuery作為依賴項添加。 Masonry 3的優點之一是它不需要jQuery,但可以與它一起使用。 以我的經驗,在沒有jQuery的情況下初始化Masonry更為可靠,並且可以跳過加載jQuery,從而可以解決頁面加載時間和兼容性問題。

步驟2:初始化Javascript

下一個功能設置砌築,定義將與之配合使用的容器,並確保一切按正確順序進行。 石工需要計算頁面上每個項目的大小,以便動態佈局其網格。 我在許多瀏覽器中遇到Masonry時遇到的一個問題是,Masonry會錯誤地計算加載緩慢圖像的物品的高度,從而導致物品重疊。 解決方案是使用imagesLoaded來防止Masonry在加載所有圖像之前計算佈局。 這樣可以確保正確調整大小。

這是將在頁面頁腳中輸出初始化腳本的函數和操作:

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


通過內嵌註釋逐步解釋該功能。 Javascript函數的作用是告訴Masonry在具有id“ masonry-loop”的容器內查找“ masonry-entry”類的項目,並僅在加載圖像後才計算網格。 我們使用querySelector設置外部容器,使用itemSelector設置內部容器。

第2步:創建砌體環

與其直接將Masonry的HTML標記添加到模板中,我們不為它創建一個單獨的模板部分。 創建一個名為“ content-masonry.php”的新文件,並將其添加到您的主題中。 這將允許您將Masonry循環添加到所需的任意數量的不同模板中。

在新文件中,您將添加以下代碼。 標記類似於您在任何內容預覽中通常看到的標記。 您可以根據需要進行任何修改,只需確保最外面的元素具有在最後一步中設置為itemSelector的“砌體進入”類即可。

>
" title="">
" title="">

該標記的每個部分都有類,因此您可以添加標記以匹配您的主題。 我喜歡在.masonry-entry中添加一個漂亮的,略圓的邊框。 另一個不錯的選擇是.masonry-entry沒有邊界,但是要給它一個陰影。 當帖子縮略圖一直延伸到容器的邊框時,這看起來特別好,這可以通過在所有方向上給.masonry-thumbnail設置邊距和填充為0來實現。 您將需要在主題的css目錄中的名為masonry.css的文件中添加所有這些樣式。

步驟3:將砌體環添加到模板

現在我們有了模板部分,您可以在您喜歡的主題的任何模板中使用它。 如果您不希望將它用於類別存檔,則可以將其添加到index.php,而不是category.php。 如果只希望在主題的主頁上使用它,則當它設置為顯示博客文章時,可以在home.php中使用它。 無論您選擇什麼地方,都需要將循環包裝在ID為“ masonry-loop”的容器中,然後使用get_template_part()將模板部分添加到循環中。 確保在while(have_posts())之前啟動砌體循環容器。

例如,以下是二十十三的index.php的主循環:


    
    
        
    

    


    

在這裡,它被修改以使用我們的砌體循環:

步驟4:設置砌體項目的響應寬度

您可以通過多種方式設置每個砌體項目的寬度。 初始化砌體時,可以使用多個像素設置寬度。 我不喜歡這樣做,因為我使用響應式主題,並且它需要一些複雜的媒體查詢才能在小屏幕上正確顯示內容。 對於自適應設計,我發現最好的方法是根據要連續多少項設置.masonry-entry的寬度值並設置一個百分比,然後讓Masonry為您完成其餘的數學運算。

所需要做的就是用100除以您要在主題的style.css中的簡單條目中設置百分比的項目數。 例如,如果您希望每行有四個項目,則可以在masonry.css文件中執行以下操作:

.masonry-entry{width:25%}

第5步:移動優化

我們可以在這裡停下來,但是我認為最終結果在小的手機屏幕上無法正常運行。 使用桌面上的新Masonry網格對主題的外觀感到滿意後,請在手機上簽出。 如果您對手機上的外觀不滿意,則需要做一些工作。

我認為手機屏幕上沒有足夠的空間容納我們添加到內容砌體模板部分中的所有內容。 您可以使用兩種有效的解決方案來縮短電話摘錄或完全跳過摘錄。 這是一個額外的功能,您可以將其添加到主題的functions.php中。 因為我認為這些問題在平板電腦上不是問題,所以我在本節的所有示例中都使用了出色的Mobble插件,僅在手機而非平板電腦上進行了更改。 我還在使用Mobble之前先檢查它是否處於活動狀態,必要時還可以使用WordPress中內置的更通用的移動檢測功能wp_is_mobile。

if (! function_exists('slug_custom_excerpt_length') ) :
function slug_custom_excerpt_length( $length ) {
    //set the shorter length once
    $short = 10;
    //set long length once
    $long = 55;
    //if we can only set short excerpt for phones, else short for all mobile devices
    if (function_exists( 'is_phone') {
        if ( is_phone() ) {
            return $short;
        }
        else {
            return $long;
        }        
    }
    else {
        if ( wp_is_mobile() ) {
            return $short;
        }
        else {
            return $long;
        }
    }
}
add_filter( 'excerpt_length', 'slug_custom_excerpt_length', 999 );
endif; // ! slug_custom_excerpt_length exists

如您所見,我們首先將長摘錄長度和短摘錄長度存儲在變量中,因為我們將使用這些值兩次,並且希望以後可以將它們從一個位置更改。 從那裡我們測試是否可以使用Mobble的is_phone()。 如果是這樣,我們設置電話的簡短摘錄,如果不是,則設置長摘錄。 之後,我們執行相同的基本操作,但是使用wp_is_mobile,如果無法使用is_phone(),它將影響所有移動設備。 希望該功能的else部分將永遠不會使用,但是最好以防萬一。 一旦設置了摘錄長度邏輯,它就歸結為將函數掛接到excerpt_length過濾器。

縮短摘錄是一種選擇,但是我們也可以通過一個簡單的過程完全消除它。 這是內容砌築的新版本,電話中省略了全部摘錄部分:

>
" title="">
" title="">
"; $excerpt .= the_excerpt(); $excerpt .= '
'; //if we can only skip for phones, else skip for all mobile devices if (function_exists( 'is_phone') { if ( ! is_phone() ) { echo $excerpt; } } else { if ( ! wp_is_mobile() ) { echo $excerpt; } } ?>

這次我們正在測試以查看是否不在手機/移動設備上,如果是,我們返回循環的摘錄部分。 如果我們在電話/移動設備上,我們什麼也不做。

您可能想做的另一件事是增加移動設備上的砌體項目的寬度,從而減少連續的數量。 為此,我們將基於設備檢測將不同的內聯樣式添加到標題中。 由於此函數使用wp_add_inline_styles,因此它將依賴於特定的樣式表。 在這種情況下,我使用masonry.css(您可能需要)來使您的砌體樣式保持獨立。 如果您最終不使用它,則可以使用另一個已經註冊的樣式表中的句柄。

if ( ! function_exists ( 'slug_masonry_styles' ) ) :
function slug_masonry_styles() {
    //set the wide width
    $wide="25%";
    //set narrow width
    $narrow = '50%';
    /**Determine value for $width**/
    //if we can only set narrow for phones, else narrow for all mobile devices
    if (function_exists( 'is_phone') {
        if ( is_phone() ) {
            $width = $narrow;
        }
        else {
            $width = $wide;
        }        
    }
    else {
        if ( wp_is_mobile() ) {
            $width = $narrow;
        }
        else {
            $width = $wide;
        }
    }
    /**Output CSS for .masonry-entry with proper width**/
    $custom_css = ".masonry-entry{width: {$width};}";
    //You must use the handle of an already enqueued stylesheet here.
    wp_add_inline_style( 'masonry', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'slug_masonry_styles' );
endif; // ! slug_masonry_styles exists

此函數使定製樣式表無效,然後使用現在應該非常熟悉的邏輯為width設置一個值。 之後,我們通過將width的值傳遞給帶有{$ width}的CSS常規外觀位來創建$ custom_css變量。 之後,只要使用Masonry樣式表,我們就使用wp_add_inline_style告訴WordPress在標頭中打印內聯樣式,然後將整個函數掛接到wp_enqueue_scripts上,然後完成。

如果您選擇將Masonry樣式合併到現有樣式表中,請確保將該樣式表的句柄與wp_add_inline_style一起使用,否則將不包括內聯樣式。 我喜歡使用wp_add_inline_style,因為我通常將動作鉤子包裝在有條件的情況下使砌體入隊,因此僅在需要時才添加它。 例如,如果我僅在博客索引和存檔頁面上使用Masonry,則可以這樣做:

if ( is_home() || is_archive() ) {
    add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
}

最後的幾個例子應該在您的大腦中打開其他一些想法。 例如,您可以使用類似的邏輯在移動設備上完全跳過石工。 wp_add_inline_style()也是一種較少使用但非常有用的函數,因為它允許您基於任何類型的條件以編程方式設置不同的樣式。 它不僅使您能夠根據設備檢測來根本性地更改任何元素的樣式,而且更改還可能基於所使用的模板,甚至無論用戶是否登錄也都可以。

希望您能看到我正在做出的這些不同變化,以此來發揮創造力。 石工和類似的級聯網格系統已經流行了一段時間,因此該流行思想有了新的轉折。 在評論中向我們展示在WordPress主題中使用Masonry時想出的最酷的方法。

一個多用途的WordPress專家Josh Pollock撰寫有關WordPress的文章,進行主題開發,擔任Pods Framework的社區經理,並提倡可持續設計的開源解決方案。