社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 > CMS教程 > ＆＃＆按 > 如何从头开始构建WordPress主题：最终步骤

如何从头开始构建WordPress主题：最终步骤

Christopher Nolan
发布： 2025-02-09 09:42:13
原创
889 人浏览过

如何从头开始构建WordPress主题：最终步骤

>在本文中，我们将完成从头开始构建WordPress主题的尝试，重点是完善我们的模板，添加元信息，缩写缩略图，侧边栏，用户友好的控件等等。

这是有关构建WordPress主题的WordPress系列的第三部分也是最后一部分。第1部分引入了WordPress主题，在第2部分中，我们构建了一个基本主题。我们使用StartBootStrap使用干净的博客模板为WordPress主题添加样式。到目前为止，我们已经编写的代码可在GitHub上找到。

>

>我们已经添加了single.php，page.php，archive.php和index.php模板，但是我们将其保留为任务的这一部分的任务。我们介绍了function.php - WordPress用来自动包含特定功能的文件，并在其中添加了功能。我们在header.php中添加了动态标头函数，然后将该功能分开到我们的functions.php中。理想情况下，应该将其组织到一个单独的文件中 - 可能在我们主题内的Inc文件夹中 - 以保持一切清洁。

在第2部分中，我们还引入了部分 - footer.php和header.php。

钥匙要点

>利用`functions.php`来添加特定于主题的功能，并有效地将代码组织到单独的文件中以进行清洁结构。
  • >实现模板零件，用于一致和模块化的HTML结构，例如`single.php`和`Index.php`。
    • >
  • >使用'add_theme_support（'Post-thumbnails'）启用和管理WordPress主题中的缩略图；
    • 通过`functions.php`注册多个侧边栏和小窗口区域，以通过WordPress小部件进行动态内容管理。
    • >使用WordPress Customizer API自定义站点外观和布局，从而使用户友好的控件用于背景图像等等。
    • >通过使用模板层次结构原理扩展单个帖子和页面自定义，并且用于结构化和特定内容显示的`get_template_part`。
    • 完善模板
    • 在上一篇文章中，我们将标签（开头一个）分开为header.php，然后添加了对此。这为身体增加了一些语义课，告诉我们我们是否在页面上，发帖，是否登录，等等，等等 - 使我们能够根据访问的页面和其他网站的不同元素进行样式的样式事物。

>如果我们访问主页并打开浏览器控制台检查这些课程，我们会发现我们缺少这些类别中的当前模板信息：

>

要更改WordPress显示的内容，我们需要知道正在使用哪些文件。在我们的情况下，index.php用作默认的后备模板。该信息图显示了使用的模板的层次结构。覆盖或创建主题时，它可能非常方便。

>

>在上一篇文章中，我们开始完善Archive.php循环，添加元信息并在输出文章中发布缩略图。我们将该循环分为一个单独的文件，将其包括在Archive.php和index.php中，然后完成完善。

>

>首先，我们将用一行请求部分文件的单行替换两个文件中的内容，因此index.php看起来像这样：>

>完成此操作后，我们将将已替换为Archive.php中的内容放入partials/content.php文件：
<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>
登录后复制
登录后复制
登录后复制
登录后复制
>

>我们将这些更改上传到服务器后，我们将看到我们的首页，在帖子列表中的每个帖子中，都有元信息 - 日期和作者链接：
<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>
登录后复制
登录后复制
登录后复制
登录后复制

如何从头开始构建WordPress主题：最终步骤这意味着我们的部分作品。

>

张贴缩略图

>我们可以看到，我们的虚假帖子一般都没有任何图像，并且没有特色图像

。如果我们转到WordPress仪表板，然后尝试将特色image

添加到我们的帖子/页面，我们将看到最右边的侧栏中没有文件上传字段。 （对于那些不熟悉WordPress的人，可以在此处阅读有关此功能的更多信息。）> 在WordPress主题中默认启用了未启用缩略图。这是一个需要专门打开新主题的功能。大多数主题都启用了它。 为此，我们包括add_theme_support（'Post-thumbnails'）;在我们的functions.php。上行

现在启用了缩略图。

>

>现在，我们可以使用WP-CLI命令WP站点空的WORDPRESS安装所有内容的安装-Alower-root（或者我们可以从WordPress仪表板手动执行），并用FakerPress将其重新填充。它应该用它从互联网上获取的特色图像填充帖子和页面。 （我们需要像以前一样重新创建顶部菜单，并为其分配页面和帖子。）

>

一个提示：如果我们正在构建待售主题，或者通常会发布给更广泛受众的主题，我们可能想使用Automattic提供的主题单元测试数据

，因为它可能会提供用于测试案例和主题详细信息范围的内容。

我们可以将图像大小指定为Fakerpress，但它很可能仍然会导致杂乱的外观。

>当我们构建主题时，用于实现抛光，标准化外观的技术之一是指定>缩略图。这些是标准尺寸WordPress，将调整所有上传图像以适合。我们将使用WordPress

add_image_size（）

>函数添加我们主题将使用的几个图像大小：

<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>
登录后复制
登录后复制
登录后复制
登录后复制
然后，我们将在我们的content.php中使用> >要在我们的存档或博客列表中实现一个格式摘要
<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>
登录后复制
登录后复制
登录后复制
登录后复制
，我们将增加字体的大小，但是为此，我们将减少由： >能够浮动图像（我们刚才提到的缩略图）和摘录，我们将以下内容添加到我们的CSS中的父元素选择器：> 
<span>add_image_size( 'list-thumb-1', 730, 400, true);
</span><span>add_image_size( 'small-list-thumb-1', 400, 200, true);
</span><span>add_image_size( 'small-list-thumb-2', 300, 200, true);
</span><span>add_image_size( 'small-list-thumb-3', 220, 140, true);
</span>
登录后复制
登录后复制
登录后复制
（我们在这里不介绍对主题本身至关重要的较小样式调整。）

>

现在，我们可以增加字体大小，并通过浮动图像（与A apent元素一起浮动图像）围绕图像进行漂浮 
<span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>the_post_thumbnail( 'small-list-thumb-1');
</span></span><span>    <span>?></span>
</span><span><span><span></a</span>></span>
</span>
登录后复制
登录后复制

>以后我们还将在单帖子/页面上使用post_thumbnails。

主题侧栏

主题侧边栏是主题中的宽度区域。它们需要在WordPress系统中注册，以便我们可以将不同的小部件放置到这些区域。一旦这样做，我们就会在模板文件中打印或输出这些小部件。 如何从头开始构建WordPress主题：最终步骤>我们将在主题中注册许多侧栏，可以在主题的GitHub存储库中看到。我们通过将以下代码添加到我们的functions.php：来做到这一点。

>在这里，我们展示了如何注册两个侧边栏。有关register_sidebar（）函数的更多详细信息可以在wordpress.org。

我们注册了11个侧边栏，但是我们不需要在所有页面模板或网站位置中输出所有这些侧栏。如果它们是在当前自定义页面中输出的，则可以在小部件下的

customizer

中访问：

> 

<span># functions.php
</span><span>function custom_excerpt_length( $length ) {
</span>    <span>return 40;
</span><span>}
</span><span>add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
</span>
登录后复制
登录后复制
>这是footer.php中侧边栏或小部件区域的实际输出的一个示例 - 这意味着它可以在全球显示：

>在这里，我们使用了上面的bottom_center_sidebar中使用的侧栏ID。> >我们还根据主栏是否有活跃的小部件（IS_ACTIVE_SIDEDBAR（））来调节主页上的中央内容容器的宽度：

>我们输出依赖于这些条件的Bootstrap类，确保如果我们省略为页面设置小部件，例如如何从头开始构建WordPress主题：最终步骤> home

>。

>我们用小部件和图像填充这些小部件区域后，这就是我们得到的： 

<span><span>.home .post-preview.post</span> {
</span>    <span>overflow: hidden;
</span><span>}
</span>
登录后复制

主题的塑造很好。读者当然会适应他们喜欢的样式。

>

> Customizer api 
<span>// Register custom sidebars
</span><span>function sidebar_register() {
</span>
    <span>$args = array(
</span>        <span>'name'          => __( 'home_header', 'bsimple' ),
</span>        <span>'description'   => __( 'home_header', 'bsimple' ),
</span>        <span>'id'            => 'h_h',
</span>        <span>'class'         => 'home_header',
</span>        <span>'before_widget' => ' <div >',
</span>        <span>'after_widget'  => '</div>',
</span>        <span>'before_title'  => '<h2 >',
</span>        <span>'after_title'   => '</h2>',
</span>    <span>);
</span>    <span>register_sidebar($args);
</span>
    <span>$args = array(
</span>        <span>'name'          => __( 'archive_sidebar_1', 'bsimple' ),
</span>        <span>'description'   => __( 'Archive Sidebar no 1', 'bsimple' ),
</span>        <span>'id'            => 'a_s_1',
</span>        <span>'class'         => 'archive_sidebar_1',
</span>        <span>'before_widget' => ' <div >',
</span>        <span>'after_widget'  => '</div>',
</span>        <span>'before_title'  => '<h2 >',
</span>        <span>'after_title'   => '</h2>',
</span>    <span>);
</span>    <span>register_sidebar($args);
</span>
    <span>$args = array(
</span>        <span>'name'          => __( 'bottom_center_sidebar', 'bsimple' ),
</span>        <span>'description'   => __( 'Bottom Center Sidebar', 'bsimple' ),
</span>        <span>'id'            => 'b_c_s',
</span>        <span>'class'         => 'bottom_center_sidebar',
</span>        <span>'before_widget' => '<div >',
</span>        <span>'after_widget'  => '</div>',
</span>        <span>'before_title'  => '<h2 >',
</span>        <span>'after_title'   => '</h2>',
</span>    <span>);
</span>    <span>register_sidebar($args);
</span>
<span>}
</span><span>add_action( 'widgets_init', 'sidebar_register' );
</span>
登录后复制

>当我们谈论样式时，我们将提及“定制器API”，并展示如何使用它来对标题的用户友好控制。

这是我们如何创建新的面板，pance和 control的一个示例（functions.php又） 

<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>
登录后复制
登录后复制
登录后复制
登录后复制
>这里的主要内容是customize_register钩子，$ wp_customize方法的顺序（add_panel，add_section，add_setting，add_control。订单效果。

>在functions.php中添加设置和控件后，我们将以下代码添加到BSIMPLE_SCRIPTS（）函数的底部，我们创建了为了加入我们的脚本和样式：

>

>我们在标题容器中添加了phome，pfront和pglobal类。现在，我们使用
<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>
登录后复制
登录后复制
登录后复制
登录后复制
WP_ADD_INLINE_STYLE（）和我们用来在开始时使用基本主题样式的Bsimple风格的手柄 - 输出我们刚刚创建的定制器设置。我们使用get_theme_mod（）获取我们注册的每个设置。

> 这样，我们可以为指南中的Dynamic_header（）函数分开的标题设置图像：

单页和帖子

> WordPress模板层次结构可帮助我们定位访问时加载的确切URL并发布的发布，以便我们可以原子设计每个其中的HTML输出。很多时候，我们不需要创建所有模板。>

>为所有帖子或页面添加通用背景图像是没有意义的。因此，我们的自定义策略将用于档案，用于帖子的博客列表，首页甚至是术语。但是对于特定的页面和帖子，我们可能希望单独设置图像。 
<span>add_image_size( 'list-thumb-1', 730, 400, true);
</span><span>add_image_size( 'small-list-thumb-1', 400, 200, true);
</span><span>add_image_size( 'small-list-thumb-2', 300, 200, true);
</span><span>add_image_size( 'small-list-thumb-3', 220, 140, true);
</span>
登录后复制
登录后复制
登录后复制
我们该怎么做？

>

>在我们的Dynamic_header（）函数中，我们已经为

> pages

>的标题指定了，所以现在我们将使用内联样式和get_the_post_thumbnail_url（）函数来设置页面'

特色图像

🎜>作为标题背景：

现在，用户可以为每个页面设置标头图像。我们可以为IS_Single（）案例做同样的事情，该案例将对所有帖子应用相同的解决方案（包括自定义帖子类型）。 >此行将允许用户在每个页面，名称subtitle_添加自定义字段，并将其输出到页面标题：> 

<span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>the_post_thumbnail( 'small-list-thumb-1');
</span></span><span>    <span>?></span>
</span><span><span><span></a</span>></span>
</span>
登录后复制
登录后复制

如果我们看不到“自定义字段”部分，我们可以在编辑屏幕的右上角通过

屏幕选项

<span># functions.php
</span><span>function custom_excerpt_length( $length ) {
</span>    <span>return 40;
</span><span>}
</span><span>add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
</span>
登录后复制
登录后复制

完成此操作后，我们将在单个页面上查看下面的subtitle_ meta字段：如何从头开始构建WordPress主题：最终步骤>

所有这些东西以及样式 - 也可以应用于

帖子

>如何从头开始构建WordPress主题：最终步骤>

我们现在需要在single.php和pagp.php中格式化输出

由于本指南的空间约束，我们将创建将在这两个模板中使用的内容，但是该结构将允许读者在需要时更具体地适应和自定义这些模板：> 

<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>
登录后复制
登录后复制
登录后复制
登录后复制
>在这里，我们使用的是10/12宽的单列布局，以MX-AUTO类为中心。我们使用部分内容single.php来输出实际内容。

>

在此部分中，我们使用the_content（）和wp_link_pages（）：>

>现在，我们有针对单页和帖子的最低限度，但是可以使用WordPress函数添加更多最低限度。我们可以自动指定我们希望WordPress在单个帖子，单页和属于特定类别等的页面中输出的细节等 
<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>
登录后复制
登录后复制
登录后复制
登录后复制
>全局小部件和页脚

>我们为页脚创建了三个小部件（侧栏）区域，并将输出添加到footer.php中。我们还在页脚标签上方添加了一个部分或小部件区域。这些小部件不是特定于主页，页面或档案，而是全球性的。一旦我们将小部件分配给它们，他们将显示范围内的网站：

我们得到的是一个简单的底部和页脚区域，我们可以用窗口小部件填充：

<span>add_image_size( 'list-thumb-1', 730, 400, true);
</span><span>add_image_size( 'small-list-thumb-1', 400, 200, true);
</span><span>add_image_size( 'small-list-thumb-2', 300, 200, true);
</span><span>add_image_size( 'small-list-thumb-3', 220, 140, true);
</span>
登录后复制
登录后复制
登录后复制

我们现在有一个最小但功能性的主题，可以用来显示内容。 如何从头开始构建WordPress主题：最终步骤本指南将在这里停止，但是接下来的事物可能要做的是确保所有用例涵盖所有用例，并且该主题是100％全功能的。为此，安装主题检查插件以及其他工具，以检查我们的主题缺少的内容，并确保一切都符合标准：

>

结论

如何从头开始构建WordPress主题：最终步骤>本指南的目的是对WordPress主题构建进行全面介绍。希望它介绍了所有基本的WordPress主题构建概念，并展示了它们如何团结在一起。

>但仍然有一些东西要学习 - 例如评论部分，作者模板，404页和许多其他小细节，如果我们想更加专业，应该涵盖这个主题。>

>本系列的初始代码可在此处的GitHub上找到，我们在本指南中构建的主题的最终版本可在此处获得。 在这些基础上，可以在综合WordPress法典的帮助下建立更多的基础。

在本系列中有三篇有关从头开始构建WordPress主题的文章：>

>在主题结构

上

主题基础

完善主题

经常询问有关从头开始构建WordPress主题的问题

    如何在WordPress中没有
  • 中的给定页面ID的内容，在WordPress中，给定页面ID的内容通常包裹在A
>中用于样式的标签。但是，如果要在没有包装器的情况下显示内容，则可以使用“ the_content”过滤器。此过滤器允许您从数据库中检索到帖子后，但在将其打印到屏幕之前修改它的内容。这是一个简单的示例，说明如何使用此过滤器删除

>标签：

函数remove_p_tags（$ content）{

return return strip_tags（$ content，'

'） ;
}
add_filter（'the_content'，'remove_p_tags'）;
此代码将从帖子内容中删除所有

标签。请注意，这将影响所有帖子，因此请仔细使用它。

为什么我的头版不加载WordPress？

可能有几个原因，为什么您的前页没有在WordPress中加载。 。以下是一些常见问题及其解决方案：

1。设置不正确：检查您的WordPress设置>读取>读取，并确保将正确的页面设置为首页。

2。主题问题：问题可能与您的主题有关。尝试切换到默认的WordPress主题，看看问题是否持续。插件冲突：有时，插件可能会相互冲突或与您的主题冲突，从而导致您的头版不加载。尝试停用所有插件，然后一一重新激活它们以识别有问题的插件。

4。损坏的.htaccess文件：损坏的.htaccess文件也可能导致此问题。尝试将.htaccess文件重命名为.htaccess_old之类的东西，看看是否可以解决问题。
>
如果这些解决方案都不可用，则最好与您的托管提供商或WordPress专家联系以获取进一步的帮助，这可能是一个好主意。 。

>如何通过使用WordPress函数和JavaScript的组合来实现在WordPress中显示其内容的发布ID？以下是如何执行此操作的基本示例：

首先，您需要获取发布ID。您可以使用WordPress中的get_the_id（）函数来执行此操作。此功能将返回循环中当前帖子的ID。

$ post_id = get_the_id（）;

接下来，您需要获取帖子的内容。您可以使用get_post_field（）函数来执行此操作。此函数从帖子中检索特定字段的值。在这种情况下，您需要获取'post_content'字段。


$ post_content = get_post_field（'post_content'，$ post_id'，$ post_id）;





您可以使用javascript在弹出窗口。这是一个简单的示例，使用alert（）函数：
alert（''）;

请注意，这是一个非常基本的示例，可能不是在所有情况下都能完美工作。对于更强大的解决方案，您可能需要考虑使用插件或更高级的JavaScript库来创建弹出窗口。

以上是如何从头开始构建WordPress主题：最终步骤的详细内容。更多信息请关注PHP中文网其他相关文章！

上一篇：使用YOTHEME PRO加速您的WordPress网站 下一篇：使用wordpress使用字体很棒
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
function_exists()无法判定自定义函数 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
来自于 2024-04-29 11:01:01
0
3
2736
google 浏览器 手机版显示的怎么实现 老师您好，google 浏览器怎么变成手机版样式的？
来自于 2024-04-23 00:22:19
0
11
2855
子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应
来自于 2024-04-19 15:37:47
0
1
2402
父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');                  ...
来自于 2024-04-18 23:52:34
0
1
2304
关于CSS思维导图的课件在哪？ 课件
来自于 2024-04-16 10:10:18
0
0
2382
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板