>在本文中,我们将完成从头开始构建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。
钥匙要点
要更改WordPress显示的内容,我们需要知道正在使用哪些文件。在我们的情况下,index.php用作默认的后备模板。该信息图显示了使用的模板的层次结构。覆盖或创建主题时,它可能非常方便。
>>在上一篇文章中,我们开始完善Archive.php循环,添加元信息并在输出文章中发布缩略图。我们将该循环分为一个单独的文件,将其包括在Archive.php和index.php中,然后完成完善。
>>首先,我们将用一行请求部分文件的单行替换两个文件中的内容,因此index.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主题中默认启用了未启用缩略图。这是一个需要专门打开新主题的功能。大多数主题都启用了它。 为此,我们包括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>,我们将增加字体的大小,但是为此,我们将减少由
<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系统中注册,以便我们可以将不同的小部件放置到这些区域。一旦这样做,我们就会在模板文件中打印或输出这些小部件。
>我们将在主题中注册许多侧栏,可以在主题的GitHub存储库中看到。我们通过将以下代码添加到我们的functions.php:
>在这里,我们展示了如何注册两个侧边栏。有关register_sidebar()函数的更多详细信息可以在wordpress.org。
我们注册了11个侧边栏,但是我们不需要在所有页面模板或网站位置中输出所有这些侧栏。如果它们是在当前自定义页面中输出的,则可以在小部件下的>
<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类,确保如果我们省略为页面设置小部件,例如 >我们用小部件和图像填充这些小部件区域后,这就是我们得到的:
>
>当我们谈论样式时,我们将提及“定制器API”,并展示如何使用它来对标题的用户友好控制。 这是我们如何创建新的面板,pance和 control的一个示例(functions.php又)
>在functions.php中添加设置和控件后,我们将以下代码添加到BSIMPLE_SCRIPTS()函数的底部,我们创建了为了加入我们的脚本和样式:
>
这样,我们可以为指南中的Dynamic_header()函数分开的标题设置图像:
> WordPress模板层次结构可帮助我们定位访问时加载的确切URL并发布的发布,以便我们可以原子设计每个其中的HTML输出。很多时候,我们不需要创建所有模板。>
> pages 特色图像
现在,用户可以为每个页面设置标头图像。我们可以为IS_Single()案例做同样的事情,该案例将对所有帖子应用相同的解决方案(包括自定义帖子类型)。
>此行将允许用户在每个页面,名称subtitle_添加自定义字段,并将其输出到页面标题:>
如果我们看不到“自定义字段”部分,我们可以在编辑屏幕的右上角通过
完成此操作后,我们将在单个页面上查看下面的subtitle_ meta字段:
所有这些东西以及样式 - 也可以应用于 > 由于本指南的空间约束,我们将创建将在这两个模板中使用的内容,但是该结构将允许读者在需要时更具体地适应和自定义这些模板: >
我们得到的是一个简单的底部和页脚区域,我们可以用窗口小部件填充: 我们现在有一个最小但功能性的主题,可以用来显示内容。
在本系列中有三篇有关从头开始构建WordPress主题的文章: >在主题结构 主题基础 完善主题 经常询问有关从头开始构建WordPress主题的问题 return return strip_tags($ content,' ') ; 1。设置不正确:检查您的WordPress设置>读取>读取,并确保将正确的页面设置为首页。> home
<span><span>.home .post-preview.post</span> {
</span> <span>overflow: hidden;
</span><span>}
</span>
<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>
<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。订单效果。
<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()<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()函数中,我们已经为<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>
>
>
<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来输出实际内容。<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>
>全局小部件和页脚
<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>
本指南将在这里停止,但是接下来的事物可能要做的是确保所有用例涵盖所有用例,并且该主题是100%全功能的。为此,安装主题检查插件以及其他工具,以检查我们的主题缺少的内容,并确保一切都符合标准:
>本指南的目的是对WordPress主题构建进行全面介绍。希望它介绍了所有基本的WordPress主题构建概念,并展示了它们如何团结在一起。
>本系列的初始代码可在此处的GitHub上找到,我们在本指南中构建的主题的最终版本可在此处获得。
在这些基础上,可以在综合WordPress法典的帮助下建立更多的基础。
如何在WordPress中没有
>中用于样式的标签。但是,如果要在没有包装器的情况下显示内容,则可以使用“ the_content”过滤器。此过滤器允许您从数据库中检索到帖子后,但在将其打印到屏幕之前修改它的内容。这是一个简单的示例,说明如何使用此过滤器删除>标签:
}
add_filter('the_content','remove_p_tags');
此代码将从帖子内容中删除所有
标签。请注意,这将影响所有帖子,因此请仔细使用它。
2。主题问题:问题可能与您的主题有关。尝试切换到默认的WordPress主题,看看问题是否持续。插件冲突:有时,插件可能会相互冲突或与您的主题冲突,从而导致您的头版不加载。尝试停用所有插件,然后一一重新激活它们以识别有问题的插件。
4。损坏的.htaccess文件:损坏的.htaccess文件也可能导致此问题。尝试将.htaccess文件重命名为.htaccess_old之类的东西,看看是否可以解决问题。
>
如果这些解决方案都不可用,则最好与您的托管提供商或WordPress专家联系以获取进一步的帮助,这可能是一个好主意。 。
>如何通过使用WordPress函数和JavaScript的组合来实现在WordPress中显示其内容的发布ID?以下是如何执行此操作的基本示例:
首先,您需要获取发布ID。您可以使用WordPress中的get_the_id()函数来执行此操作。此功能将返回循环中当前帖子的ID。
$ post_content = get_post_field('post_content',$ post_id',$ post_id);
您可以使用javascript在弹出窗口。这是一个简单的示例,使用alert()函数:
请注意,这是一个非常基本的示例,可能不是在所有情况下都能完美工作。对于更强大的解决方案,您可能需要考虑使用插件或更高级的JavaScript库来创建弹出窗口。
以上是如何从头开始构建WordPress主题:最终步骤的详细内容。更多信息请关注PHP中文网其他相关文章!