首页 视频课程 主题开发课程第02章、开发实例 WordPress入门实例:独立页面制件方法

WordPress入门实例:独立页面制件方法

2023-06-11 / 585阅

1. 什么是独立页面?

独立页面是指在 WordPress 中不隶属于任何一篇文章或页面,独自存在的一个页面。一般来说,独立页面用于展示网站的特殊内容,如“关于我们”、“联系方式”等静态页面。

2. 独立页面制作方法

2.1 创建独立页面

在 WordPress 后台,“页面”→“新建页面”,填写页面标题和内容即可创建独立页面。

2.2 模板选择

默认情况下,新建的独立页面会使用主题的 page.php 模板来显示。若需要单独设置独立页面的显示效果,可以在页面编辑界面中选择“页面属性”→“模板”,在下拉菜单中选择对应的模板。

2.3 自定义独立页面模板

若需要自定义独立页面的模板,可以按以下步骤操作:

  1. 在主题文件夹中新建一个 PHP 文件,文件名可以是任意的,不过一般习惯使用 page-页面名称.php 的形式,方便后期管理。
  2. 添加页面内容,可以使用 WordPress 原生函数来调用页面数据。
  3. 在文件开头使用如下代码来定义所需的模板信息:
<?php
/* 
 Template Name: 自定义独立页面模板
*/
?> 

其中, Template Name 后面的内容即为改模板的名称。

  1. 将 PHP 文件上传至主题文件夹中的“模板”目录下。

2.4 调用独立页面

经过以上步骤,独立页面模板就制作完成了。在日后需要调用独立页面时,可以在 WordPress 后台使用如下代码调用页面的内容:

<?php
    $page_id = 123; // 独立页面的 ID
    $page_data = get_page( $page_id );
    if ( $page_data ) {
        echo apply_filters( 'the_content', $page_data->post_content );
    }
?> 

其中 $page_id 为独立页面的 ID,可以在“页面”→“所有页面”中查看。get_page() 函数可以获取指定页面的详细信息,包括标题、内容、发布时间等。最后使用 apply_filters() 函数来过滤独立页面内容中的 HTML 标签,使页面能够正常显示。

3. 示例代码

下面是一个简单的示例代码,用于演示如何制作一个独立页面模板。

<?php
/*
 Template Name: 自定义独立页面模板
*/
?>

<?php get_header(); ?>

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <?php while ( have_posts() ) : the_post(); ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <header class="entry-header">
                    <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
                </header><!-- .entry-header -->

                <div class="entry-content">
                    <?php the_content(); ?>
                </div><!-- .entry-content -->

                <?php if ( comments_open() || get_comments_number() ) : ?>
                    <div class="comments-area">
                        <?php comments_template(); ?>
                    </div>
                <?php endif; ?>

            </article><!-- #post-## -->

        <?php endwhile; // end of the loop. ?>

    </main><!-- #main -->
</div><!-- #primary -->

<?php get_footer(); ?> 

代码中包含了基本的 HTML 结构和 WordPress 原生函数,可以根据需要进行修改。此代码中还包含了评论功能,如果不需要评论,可以删除相关代码。

阅读文章或者观看视频过程中有任何问题,请下方留言或者联系我Q248758228

大家谈论
    我的见解
    目录