Orang ramai suka gambar. Mereka suka melihatnya, mereka suka mengkliknya. Oleh itu, masuk akal untuk menggunakannya dalam navigasi tapak web anda.

Anda mungkin sudah menggunakan imej yang ditampilkan dalam halaman arkib anda untuk memberi pengguna pemahaman yang lebih mendalam tentang kandungan siaran anda dan untuk menjadikan halaman arkib anda kelihatan lebih baik. Imej yang cantik dan boleh diklik yang besar juga menjadikan proses menyemak imbas halaman atau menerbitkan siaran lebih intuitif.

Tetapi di tempat lain, anda boleh menggunakan imej yang ditampilkan untuk membantu menavigasi ke bahagian tertentu tapak WordPress anda. Dalam tutorial dua bahagian ini, kami akan menunjukkan kepada anda cara membuat grid imej yang memaut ke subhalaman halaman tertentu dalam tapak web anda atau subhalaman halaman semasa.

Dalam bahagian pertama ini, saya akan menunjukkan cara menulis PHP untuk mendapatkan halaman dan mengeluarkan tajuk dan imej yang ditampilkan, pautan dalaman. Dalam bahagian dua, Ian Yates menunjukkan kepada anda cara menambah CSS untuk mengubah senarai anda menjadi grid yang cantik.

Apa yang anda perlukan

Untuk mengikuti tutorial ini, anda memerlukan perkara berikut:

• Pemasangan Pembangunan WordPress - Jangan tambahkannya pada tapak langsung anda sehingga ujian.
• Tema dengan cangkuk tindakan untuk anda menambah kandungan atau mengedit. Jika ia tema pihak ketiga tanpa cangkuk, buat tema kanak-kanak dan editnya.
• Penyunting kod.

Tentukan pendekatan anda

Perkara pertama yang perlu dilakukan ialah memutuskan halaman yang anda ingin keluarkan. Dalam tutorial ini saya akan menunjukkan dua pilihan:

• Senarai subhalaman halaman semasa, termasuk imej.
• Senarai subhalaman untuk halaman tertentu, yang mengandungi imej. Ia boleh muncul di mana-mana sahaja di tapak anda, bukan hanya halaman induk.

Mulakan

Titik permulaan kedua-dua kaedah adalah sama.

Mula-mula buat pemalam dalam folder wp-content/plugins. Anda perlu mencipta folder untuk pemalam kerana dalam bahagian kedua tutorial ini anda akan menambah lembaran gaya serta fail pemalam utama.

Setelah anda mempunyai folder, buat fail PHP untuk kod anda. Saya memanggil tutsplus-child-pages.php saya.

Sekarang sediakan fail pemalam anda dan tambahkan teks yang diulas di bahagian atas:

/**
 * Plugin Name:  Tutsplus List Child Pages
 * Plugin URI:   https://github.com/rachelmccollin/tutsplus-list-child-pages
 * Description:  Output a list of children of the current page or a specific page with featured images.
 * Author:       Rachel McCollin
 * Author URI:   https://rachelmccollin.com
 * Version:      1.0
 * Text Domain:  tutsplus
 * License:      GPLv2.0+
 */

Ini memberitahu WordPress tentang pemalam anda dan kegunaannya.

Sekarang, teruskan dan buat beberapa halaman jika anda belum melakukannya. Saya akan membuat beberapa halaman dengan subhalaman, termasuk halaman lokasi sebagai halaman induk untuk senarai halaman khusus saya.

Ini adalah halaman saya di admin:

Kini tiba masanya untuk menulis fungsi yang mengeluarkan senarai.

Keluarkan senarai anak halaman semasa

Mari mulakan dengan pilihan ini. Ini akan mengeluarkan senarai semua subhalaman halaman semasa, termasuk imej, pautan dan tajuk.

Ini ialah kaedah yang berguna jika tapak web anda mempunyai struktur halaman hierarki dan anda ingin menggalakkan orang ramai melawat halaman peringkat atas (atau halaman peringkat pertengahan, jika tersedia) untuk melawat halaman di bawah mereka dalam struktur.

Mula-mula buat fungsi dalam fail pemalam:

function tutpslus_list_current_child_pages() {

}

Sekarang, di dalam fungsi, semak sama ada kita berada di halaman. Semua yang lain akan diletakkan di dalam tag bersyarat ini:

if ( is_page() ) {

}

Seterusnya, tetapkan $post pembolehubah global dan tentukan halaman induk: $post 全局變量并定義父頁(yè)面：

global $post;

// define the page they need to be children of
$parentpage = get_the_ID();

之后，定義 get_pages() 函數(shù)的參數(shù)：

// define args
$args = array(
    'parent' => $parentpage,
	'sort_order' => 'ASC',
	'sort_column' => 'menu_order',
);

$children = get_pages( $args );

您可能想要更改其中一些參數(shù)。我使用 menu_order 進(jìn)行排序，因此我可以手動(dòng)調(diào)整它，但您可以使用日期、標(biāo)題或任何其他可排序參數(shù)。

下一個(gè)任務(wù)是使用 get_pages() 函數(shù)的結(jié)果設(shè)置 foreach 循環(huán)：

if ( $children ) { ?>

    <div class="child-page-listing">
		
		<h2><?php _e( 'Learn More', 'tutsplus' ); ?></h2>
	
		<?php //foreach loop to output
		foreach ( $children as $post ) {
			
			setup_postdata( $post ); ?>
			
			<article id="<?php the_ID(); ?>" class="child-listing" <?php post_class(); ?>>
				
				<?php if ( has_post_thumbnail() ) { ?>
				
					<a class="child-post-title" href="<?php the_permalink(); ?>">
						<?php the_title(); ?>
					</a>
					
					<div class="child-post-image">	
						<a href="<?php the_permalink(); ?>">
							<?php the_post_thumbnail( 'medium' ); ?>
						</a>
					</div>	
			
				<?php }	?>
			
			</article>	
			
		<?php } ?>
		
	</div>
	
<?php }

讓我們運(yùn)行一下該代碼：

1. 首先，我們檢查 get_pages() 函數(shù)是否返回任何結(jié)果，即 $children 是否已填充。
2. 然后我們?yōu)槊總€(gè)子頁(yè)面啟動(dòng)一個(gè) foreach 循環(huán)作為 $post 變量。
3. 在該循環(huán)中，我們打開(kāi)一個(gè) article

   add_action( 'after_content', 'tutpslus_list_current_child_pages' );
   

Selepas itu, tentukan parameter fungsi get_pages():

4. tutpslus_list_current_child_pages();
   

Anda mungkin mahu menukar beberapa parameter ini. Saya menggunakan menu_order untuk mengisih supaya saya boleh melaraskannya secara manual, tetapi anda boleh menggunakan tarikh, tajuk atau mana-mana parameter boleh diisih yang lain.
Tugas seterusnya ialah menyediakan gelung foreach menggunakan hasil daripada fungsi get_pages():

6. $parentpage = get_the_ID();
   

Mari jalankan kod ini:

Mula-mula, kami menyemak sama ada fungsi get_pages() mengembalikan sebarang hasil, iaitu jika $children diisi.

Kemudian kami memulakan gelung foreach untuk setiap subhalaman sebagai pembolehubah $post.

Dalam gelung ini, kami membuka elemen article.

??Kami menyemak sama ada terdapat imej yang ditampilkan (atau imej kecil siaran) dan mengeluarkannya dalam pautan pada halaman. ?? ??Kemudian kami mengeluarkan tajuk halaman ke dalam pautan halaman. ?? ??Akhir sekali, kami mematikan pemeriksaan elemen dan keadaan serta gelung foreach itu sendiri. ?? ?? ??Saya telah menambahkan kelas CSS pada setiap elemen supaya kita boleh menggayakannya dalam bahagian kedua tutorial ini. ?? ??Tambahkan kod pada tema?? ??Kini anda mempunyai fungsi anda. Langkah seterusnya ialah menambah ini pada tema anda supaya ia boleh dikeluarkan di lokasi yang betul. ??

如果您的主題有動(dòng)作掛鉤，您可以將您的函數(shù)掛鉤到其中之一。因此，如果我的有一個(gè) after_content 掛鉤，我可以在我的插件中的函數(shù)外部添加此代碼：

add_action( 'after_content', 'tutpslus_list_current_child_pages' );

但是，我在這個(gè)演示中使用了“二十十六”主題，它沒(méi)有這樣的動(dòng)作掛鉤。因此，我需要直接在模板文件中添加函數(shù)。

如果您使用自己的主題，則可以將其添加到 page.php 文件中您希望顯示列表的位置。

但如果您使用的是第三方主題，則不得對(duì)其進(jìn)行編輯，因?yàn)橄麓胃轮黝}時(shí)所有更改都將丟失。相反，創(chuàng)建一個(gè)子主題。在新的子主題中創(chuàng)建父主題的 page.php 文件的副本（或 page.php 的循環(huán)文件的副本），然后對(duì)其進(jìn)行編輯。

確定您希望在頁(yè)面中輸出列表的位置，并將其添加到主題模板文件中：

tutpslus_list_current_child_pages();

我已將其添加到子主題的 page.php 文件中的循環(huán)之后。

現(xiàn)在讓我們看一下該網(wǎng)站。這是我的關(guān)于我們頁(yè)面及其子頁(yè)面：



這就是添加指向當(dāng)前頁(yè)面子頁(yè)面的鏈接的方法。但是，如果您想添加指向某一特定頁(yè)面的子頁(yè)面的鏈接該怎么辦？接下來(lái)讓我們解決這個(gè)問(wèn)題。

輸出特定頁(yè)面的子級(jí)列表

此代碼與當(dāng)前頁(yè)面子頁(yè)面的代碼幾乎相同。區(qū)別在于定義運(yùn)行 get_pages() 時(shí)將使用的父頁(yè)面。

復(fù)制插件文件中的第一個(gè)函數(shù)并編輯函數(shù)名稱，使它們不同。

找到頁(yè)面上的條件檢查并將其刪除。不要忘記也刪除該檢查的右大括號(hào)。

現(xiàn)在找到如下行：

$parentpage = get_the_ID();

將其替換為：

$page = get_page_by_path( 'locations', OBJECT, 'page' );
    
$parentpage = $page->ID;

您會(huì)看到它使用 get_page_by_path() 函數(shù)，其第一個(gè)參數(shù)是目標(biāo)頁(yè)面的 slug。編輯此內(nèi)容，使其使用您想要在網(wǎng)站中定位的頁(yè)面的 slug。

在此函數(shù)中編輯 CSS 類也是一種很好的做法，以便它們與第一個(gè)函數(shù)中的 CSS 類不同。這樣，如果您同時(shí)使用兩者，則可以為每個(gè)使用不同的樣式。

這是進(jìn)行這些編輯后的完整功能：

function tutpslus_list_locations_child_pages() {
    			
	global $post;
	
	// define the page they need to be children of
	$page = get_page_by_path( 'locations', OBJECT, 'page' );
    
    $parentpage = $page->ID;
    
    // define args
	$args = array(
		'parent' => $parentpage,
		'sort_order' => 'ASC',
		'sort_column' => 'menu_order',
	);
	
	//run get_posts
	$children = get_pages( $args );
	
	if ( $children ) { ?>
	
		<div class="child-page-listing">
			
			<h2><?php _e( 'Our Locations', 'tutsplus' ); ?></h2>
		
			<?php //foreach loop to output
			foreach ( $children as $post ) {
				
				setup_postdata( $post ); ?>
				
				<article id="<?php the_ID(); ?>" class="location-listing" <?php post_class(); ?>>
					
					<?php if ( has_post_thumbnail() ) { ?>
					
						<a class="location-title" href="<?php the_permalink(); ?>">
							<?php the_title(); ?>
						</a>
						
						<div class="location-image">	
							<a href="<?php the_permalink(); ?>">
								<?php the_post_thumbnail( 'medium' ); ?>
							</a>
						</div>	
				
					<?php }	?>
				
				</article>	
				
			<?php } ?>
			
		</div>
		
	<?php }
			
}

將代碼添加到主題

您需要再次將代碼添加到主題中。在這種情況下，您不僅希望列表在靜態(tài)頁(yè)面中輸出，而且可能希望將其放在不同的位置。

如果您的主題有操作掛鉤，您可以在插件文件中使用其中之一，方式與之前類似：

add_action( 'before_footer', 'tutpslus_list_locations_child_pages' );

我將把它添加到我的主題的頁(yè)腳中，再次在我的子主題中創(chuàng)建 footer.php 的副本并對(duì)其進(jìn)行編輯。

這是我的 footer.php 文件中的代碼，位于 footer 元素的開(kāi)頭：

<?php tutpslus_list_locations_child_pages(); // list locations pages ?>

這是我的頁(yè)腳中的列表輸出。這是在單個(gè)帖子的底部：



提示：如果出現(xiàn)以下情況，您可能希望避免在位置頁(yè)面中輸出此列表：您同時(shí)運(yùn)行這兩個(gè)函數(shù)，以避免重復(fù)。嘗試使用頁(yè)面 ID 添加條件標(biāo)記來(lái)實(shí)現(xiàn)此目的。

后續(xù)步驟

您現(xiàn)在有兩個(gè)頁(yè)面列表：一個(gè)是當(dāng)前頁(yè)面的子頁(yè)面，另一個(gè)是特定頁(yè)面的子頁(yè)面。

現(xiàn)在，圖像都被推到頁(yè)面的一側(cè)，標(biāo)題看起來(lái)不太好。在這個(gè)由兩部分組成的教程的下一部分（鏈接如下）中，您將學(xué)習(xí)如何設(shè)置圖像樣式以創(chuàng)建具有 CSS 網(wǎng)格布局的網(wǎng)格，以及如何將標(biāo)題文本集成到該網(wǎng)格中。