文章樹狀階層結構

 【WordPress】後台文章實現樹狀階層結構_Nested Pages 外掛

自從體驗過 Atlassian 的 wiki 的樹狀結構文章後,
就不自覺深深地愛上了這種文章管理模式,
文章之間有階層關係,方便查詢,
另外,也可以手動拖曳文章位置,
讓你的文章想放哪就放哪。

因此,開始自從寫部落格後,
就很想在 WordPress 採用這種模式,
只可惜 WordPress 後台管理文章不支援這種方式,
最後,我使用 Nested Pages 這套外掛,
加上要自己調整一下主題的 functions.php 程式碼就可以成功達到目的囉,
一起來試試吧~

安裝 Nested Pages 外掛

外掛 > 安裝外掛 > 搜尋”Nested Pages” > 立即安裝 > 啟用

調整 Nested Pages 設定

Nested Pages 預設只適用頁面( Pages ),
因此需要打開文章( Posts )設定才可以實現拖拉效果。
已安裝外掛 > Nested Pages > Settings > Post Types > Enable Post Types > 勾選「文章」 > 儲存設定

這時可以觀察到「文章」後面沒有 hierarchical (階層) 字樣,
而「頁面」有顯示,這個我們後面再來說明。

拖曳效果

我們就來看看文章的拖曳效果吧

文章 > Sort View > 拖拉任一文章

拖拉後就可以移到自己想要的位置了,
是不是很方便!

但是我們還有一個樹狀結構效果需要實現,
以下為頁面的樹狀結構效果:

頁面之間有父子關係,方便管理,好想要阿~

文章增加階層結構

這部分就稍微複雜一點,不過跟著一起做應該不會有問題,應該拉XD

首先登入你的 Bluehost,如果不是 Bluehost 的話,就登入你的 CPANEL 後台。

Bluehost > Hosting > CPANEL

cPanel > 檔案 > 檔案管理員

目錄 > public_html > wp-content > themes > 你目前的主題 > funtions.php > 右鍵 > Edit

Edit

文章( Posts )改變為樹狀結構( Hierarchical ) 程式碼

把以下程式碼加到 functions.php 的最下面

/**
 * Modify post type to support hierarchical structure.
 */
function amphibious_modify_post_type() {
	// Modify 'post' type to support hierarchical structure like 'pages'.
	$args = array(
		'hierarchical' => true, // Enable hierarchical structure for posts.
	);

	// Get current registered post type args.
	$post_type = get_post_type_object('post');

	// Merge new args with current args.
	$new_args = array_merge((array) $post_type, $args);

	// Re-register the post type with the new arguments.
	register_post_type('post', $new_args);
}
add_action('init', 'amphibious_modify_post_type');

以下是我的 functions.php 程式碼

functions.php

<?php
/**
 * amphibious functions and definitions
 *
 * @package Amphibious
 */

if ( ! function_exists( 'amphibious_setup' ) ) :
/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which
 * runs before the init hook. The init hook is too late for some features, such
 * as indicating support for post thumbnails.
 */
function amphibious_setup() {

	/*
	 * Make theme available for translation.
	 * Translations can be filed in the /languages/ directory.
	 * If you're building a theme based on amphibious, use a find and replace
	 * to change 'amphibious' to the name of your theme in all the template files
	 */
	load_theme_textdomain( 'amphibious', get_template_directory() . '/languages' );

	// Add default posts and comments RSS feed links to head.
	add_theme_support( 'automatic-feed-links' );

	/*
	 * Let WordPress manage the document title.
	 * By adding theme support, we declare that this theme does not use a
	 * hard-coded <title> tag in the document head, and expect WordPress to
	 * provide it for us.
	 */
	add_theme_support( 'title-tag' );

	/*
	 * Enable support for custom logo.
	 *
	 * @link https://codex.wordpress.org/Theme_Logo
	 */
	add_theme_support( 'custom-logo', array(
		'height'      => 400,
		'width'       => 580,
		'flex-height' => true,
		'flex-width'  => true,
		'header-text' => array( 'site-title', 'site-description' ),
	) );

	/*
	 * Enable support for Post Thumbnails on posts and pages.
	 *
	 * @link http://codex.wordpress.org/Function_Reference/add_theme_support#Post_Thumbnails
	 */
	add_theme_support( 'post-thumbnails' );

	// Theme Image Sizes
	add_image_size( 'amphibious-featured', 1920, 1000, true );
	add_image_size( 'amphibious-featured-single', 1920, 0, true );

	// This theme uses wp_nav_menu() in one locations.
	register_nav_menus( array (
		'header-menu' => esc_html__( 'Header Menu', 'amphibious' ),
	) );

	// This theme styles the visual editor to resemble the theme style.
	add_editor_style( array ( 'css/editor-style.css', amphibious_fonts_url() ) );

	/*
	 * Switch default core markup for search form, comment form, and comments
	 * to output valid HTML5.
	 */
	add_theme_support( 'html5', array (
		'comment-form', 'comment-list', 'gallery', 'caption'
	) );

	// Setup the WordPress core custom background feature.
	add_theme_support( 'custom-background', apply_filters( 'amphibious_custom_background_args', array (
		'default-color' => 'f2f2f2',
		'default-image' => '',
	) ) );

	// Add theme support for selective refresh for widgets.
	add_theme_support( 'customize-selective-refresh-widgets' );
}
endif; // amphibious_setup
add_action( 'after_setup_theme', 'amphibious_setup' );

/**
 * Set the content width in pixels, based on the theme's design and stylesheet.
 *
 * Priority 0 to make it available to lower priority callbacks.
 *
 * @global int $content_width
 */
function amphibious_content_width() {
	// phpcs:ignore WPThemeReview.CoreFunctionality.PrefixAllGlobals.NonPrefixedVariableFound
	$GLOBALS['content_width'] = apply_filters( 'amphibious_content_width', 774 );
}
add_action( 'after_setup_theme', 'amphibious_content_width', 0 );

/**
 * Theme Bootstrap
 */
require get_template_directory() . '/inc/init.php';

/**
 * Modify post type to support hierarchical structure.
 */
function amphibious_modify_post_type() {
	// Modify 'post' type to support hierarchical structure like 'pages'.
	$args = array(
		'hierarchical' => true, // Enable hierarchical structure for posts.
	);

	// Get current registered post type args.
	$post_type = get_post_type_object('post');

	// Merge new args with current args.
	$new_args = array_merge((array) $post_type, $args);

	// Re-register the post type with the new arguments.
	register_post_type('post', $new_args);
}
add_action('init', 'amphibious_modify_post_type');

圖示

儲存變更

再回去看 Nested Pages 設定

就可以看到「文章」旁邊就有 Hierarchical 的字樣,代表文章有樹狀結構囉~

嘗試文章階層效果

接下來,
我們再回到左側選單的「文章」主選單,
可以看到子選單的「Sorted View」已經變成「Nested View」。

進入「Nested View」> 拖拉任一文章

就可以把該文章變成任一文章的子文章囉,大功告成!!

請繼續享受寫文章的樂趣吧哈哈哈

參考資料

  1. ChatGPT

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *