分类
WordPress笔记

wordpress 如何为js加async或defer

WordPress 4.1版本开始引入了一个新的filter,最终提供了一种简单的方法来添加异步/延迟属性。
apply_filters('script_loader_tag', string $tag, string $handle, string $src);

具体用法:
function add_async_attribute($tag, $handle) {
if ( 'my-js-handle' !== $handle )
return $tag;
return str_replace( ' src', ' async="async" src', $tag );
}

add_filter('script_loader_tag', 'add_async_attribute', 10, 2);

同理若需设置defer, 将async=”async”改成defer=”defer”即可。

分类
WordPress笔记

wpautop() 控制文章内容是否自动换行

WordPress默认方法输出内容时,会为编辑器内换行的内容自动加上<p>标签。

如果想去掉这个功能,可使用

remove_filter( 'the_content', 'wpautop' );

而有时,例如用了$post->post_content会使这个功能失效,若想还原,可这样写

$content = $post->post_content;
$content = wpautop( $content );

同理可处理摘要the_excerpt()及评论内容comment_text().

分类
WordPress笔记

自定义主题初始小工具(widge)等方法:add_theme_support()

How to use it

Themes define a subset of core-provided starter content using add_theme_support() – let’s look at a breakdown of how Twenty Seventeen does things. In its setup function hooked to after_setup_theme, we see an array with collections of widgets, posts (pages), attachments, options, theme mods, and nav menus registered as the starter content. The customizer looks for this starter-content at after_setup_theme priority 100, so do make this call at that point or later:

add_theme_support( 'starter-content', array( /*...*/ ) )

Widgets

Each widget area ID corresponds to one sidebar registered by the theme, with the contents of each widget area array being a list of widget “symbols” that reference core-registered widget configurations. Most default widgets are available (archivescalendarcategoriesmetarecent-commentsrecent-posts, and search), as well as text widgets with business hours (text_business_info) and a short prompt for an “about this site” style blurb (text_about). Themes should place widgets based on what works best in that area – for instance, business info in a footer widget of a business-centric theme, or a nicely styled calendar widget in the sidebar of a blog.

Custom widgets can also be registered at the time of starter content registration or later filtered in, which will be more likely the case for plugins, as add_theme_support() for starter content will be overridden by any later calls.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Custom registration example
add_theme_support( 'starter-content', array(
    'widgets' => array(
        'sidebar-1' => array(
            'meta_custom' => array( 'meta', array(
                'title' => 'Pre-hydrated meta widget.',
            ) ),
        ),
    ),
);
// Plugin widget added using filters
function myprefix_starter_content_add_widget( $content, $config ) {
    if ( isset( $content['widgets']['sidebar-1'] ) ) {
        $content['widgets']['sidebar-1']['a_custom_widget'] = array(
            'my_custom_widget', array(
                'title' => 'A Special Plugin Widget',
            ),
        );
    }
    return $content;
}
add_filter( 'get_theme_starter_content', 'myprefix_starter_content_add_widget', 10, 2 );
分类
WordPress笔记

widget – 注册到主题的特定区域

WordPress的Widget小工具是个非常实用的功能,它让非技术型WordPress用户也可以根据自己对版面的需求轻松定制主题,WordPress无数的widgets让用户得以尽情发挥自己的创意。 在很多人的意识里,widget就是出现在侧边栏的小工具,不过实际上它可以出现在主题的任何地方。 这篇文章我们就来看一下怎样用简单的步骤让主题的其它版块也支持widget。 最后还会送上几个widget使用技巧。

第一步

在当前主题的functions.php文件里添加下面这段代码:

if (function_exists('register_sidebar')) {

	register_sidebar(array(
		'name' => 'Widgetized Area',
		'id'   => 'widgetized-area',
		'description'   => 'This is a widgetized area.',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));

}

第一步就是这么简单。 代码添加完毕后就可以继续下一步了。下面是对第一步过程的解释,没兴趣的可以跳过。

上面的代码用以确保当前使用的WordPress版本支持widget,并声明一个用来创建主题widget区域的值的数组。 下面我们来看看这些值:

  • Name——将要显示在WP 管理界面的新widget区域的名称
  • Id——新widget区域的唯一标识符
  • Description——对新widget区域的说明
  • Before_widget——用户添加widget小工具前生成的批注
  • after_widget——用户添加widget小工具后生成的批注
  • Before_title——添加widget小工具的用户名前的批注
  • After_title——添加widget小工具的用户名后的批注

有了这些参数,我们的新widget区域最后会得到以下输出(假设我们在新的widget区域添加的是一个内置搜索工具):

<div id="search-3" class="widget widget_search">
	<h4>Search</h4>
	<form role="search" method="get" id="searchform" action="http://localhost/283/" >
		<div>
			<label class="screen-reader-text" for="s">Search for:</label>
			<input type="text" value="" name="s" id="s" />
			<input type="submit" id="searchsubmit" value="Search" />
		</div>
	</form>
</div>

需要注意的是为开始<div>标签生成的批注(markup),该批注根据widget数组指定的通配符匹配获取相关的属性信息。

下面继续第二步骤。

第二步

你希望新的widget区域显示在主题的什么位置,就在相应的主题模板文件中添加以下代码:

<div id="widgetized-area">

	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('widgetized-area')) : else : ?>

	<div class="pre-widget">
		<p><strong>Widgetized Area</strong></p>
		<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
	</div>

	<?php endif; ?>

</div>

当这一步骤也完成后,你所选择的位置上就会出现一个新的支持widget的版块,你可以在这个版块添加任何一个自己需要的widget工具。 接下来就能用相同的方法让主题的其它位置也支持widget工具了。

下面是对第二步骤的解释。 如果你没有指定widget,那么If/endif语句之间的内容会被输出到浏览器。 通过这种形式,用户能了解到,自己可以在WordPress后台的“小工具”菜单中对内容输出的位置进行widget定制。 代码里还有一个“pre-widget”类可以设置pre-widget版块的样式。 当一个页面上出现多个widget区域时,可以用一个类名称来保持widget样式统一。

同时也要注意我们要将widget数组(见第一步)中指定的id作为代码第二行dynamic_sidebar() 的参数值。

多个新widget区域

重复第一步和第二步,你就可以让主题的各个位置支持widget了。下面假设你需要在主题的头部、侧边栏、和底部添加widget。 那么首先你需要把下面的代码复制到functions.php文件里:

if (function_exists('register_sidebar')) {

	register_sidebar(array(
		'name' => 'Header',
		'id'   => 'header',
		'description'   => 'This is the widgetized header.',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));
	register_sidebar(array(
		'name' => 'Sidebar',
		'id'   => 'sidebar',
		'description'   => 'This is the widgetized sidebar.',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));
	register_sidebar(array(
		'name' => 'Footer',
		'id'   => 'footer',
		'description'   => 'This is the widgetized footer.',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));

}

接下来把下面的代码分别添加到header.php、sidebar.php和footer.php文件中。

header.php:

<div id="widgetized-header">

	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('header')) : else : ?>

	<div class="pre-widget">
		<p><strong>Widgetized Header</strong></p>
		<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
	</div>

	<?php endif; ?>

</div>

sidebar.php:

<div id="widgetized-sidebar">

	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar')) : else : ?>

	<div class="pre-widget">
		<p><strong>Widgetized Sidebar</strong></p>
		<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
	</div>

	<?php endif; ?>

</div>

footer.php:

<div id="widgetized-footer">

	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('footer')) : else : ?>

	<div class="pre-widget">
		<p><strong>Widgetized Footer</strong></p>
		<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
	</div>

	<?php endif; ?>

</div>

成功! 当然你也可以根据自己的需要调整代码中的各种细节,但是以上两步就是使主题其它版块支持widget的全部过程。 接下来要说的是一些widget的技巧。

Widget使用技巧

管理自定义的widget小工具

给主题添加新的widget后,你可以新建一个独立文件夹并命名为widgets.php,将所有自定义的widget都保存到这个文件夹。 用下面的这行代码实现保存自定义widget功能:

if ($wp_version >= 2.8) require_once(TEMPLATEPATH.’/widgets.php’);

将代码添加到functions.php文件里,然后将所有自定义的widget工具保存到widgets.php中。这种方法可以确保所有widget都能够顺利加载并且运行在WordPress支持widget的所有版本上。 如此,你的主题文件就能够得到有效管理。

替换WordPress默认widget

WordPress的很多默认小工具都有需要改进的地方。 但值得庆幸的是,在WordPress里你可以自由替换这些默认小工具。 例如,下面这段代码就可以将内置搜索工具换成你自己需要的widget工具。

<?php function custom_search_widget() { ?>

<form action="http://localhost/283/index.php" method="get">
	<div>
		<label for="s">Site Search</label>
		<input id="s" name="s" alt="Search" type="text" />
	</div>
</form>

<?php } if (function_exists('register_sidebar_widget'))

register_sidebar_widget(__('Search'), 'custom_search_widget'); ?>

隐藏不用的widget区域

如果你通过上面的方法让主题的某个位置支持了widget,但暂时没有在这个位置上安排合适的小工具,那么这个位置就会空出来,从整个版面看上去会很奇怪。 为了避免这种情况,请用下面的代码围绕暂时不用的widget区域:

<?php if (function_exists('is_sidebar_active') && is_sidebar_active('sidebar')) { ?

<!-- 第二步骤中的代码(或自定义内容) -->

<?php } ?>

有了上面这段代码,支持widget的版块只会在确实包含已启用小工具的情况下才显示在前台。 。 同时需要注意,这段代码也支持显示widget外的其它内容。

原文:How to Widgetize Your WordPress Theme in 2 Steps

转自:http://www.wordpress.la/widgetize-wordpress-theme.html

分类
WordPress笔记

WordPress 函数:add_theme_support()让你的主题支持特定的功能

add_theme_support() 用于在我们的当前使用的主题添加一些特殊的功能,函数一般写在主题的functions.php文件中,当然也可以再插件中使用钩子来调用该函数,如果是挂在钩子上,那他必须挂在after_setup_theme钩子上,因为 init hook 对于一些功能来说,已经太迟了.

用法

  1. <?php add_theme_support( $feature ); ?>

参数

$feature
(string) (必须) 需要添加特殊功能名称,可以是以下参数:

‘post-thumbnails’

    —– 增加缩略图支持

‘automatic-feed-links’

    自动输出RSS

‘post-formats’

    —– 增加文章格式功能

‘custom-background’

    —– 增加自定义背景

‘custom-header’

    —– 增加自定义顶部图像

‘menus’

    ——自定义导航菜单

默认: None
也就是说你可以如下使用:

  1. add_theme_support( 'post-thumbnails' );
  2. add_theme_support( 'automatic-feed-links' );
  3. add_theme_support( 'post-formats', array( 'aside', 'gallery' ) );
  4. add_theme_support(
  5.     'custom-background',
  6.     array(
  7.         'default-color' => '0B3B41',
  8.         'default-image' => get_template_directory_uri().'/images/bg.jpg',
  9.     )
  10. );
  11. add_theme_support( 'custom-header' );

Post Thumbnails(启用文章缩略图功能)

从WordPress2.9版本开始,可以给模板添加文章缩略图功能。操作方法很简单,只需要把下面的代码添加到functions.php里面。

  1. add_theme_support( 'post-thumbnails' );

然后在要显示缩略图的地方放置下面的代码即可。

  1. <?php the_post_thumbnail(); ?>

在 Wp 2.9 版本后,我们可以给 ‘post-thumbnails’ 即缩略图功能增加一个限定的参数,举例如下:

  1. //常规用法,在所有样式的文章、页面日志中使用缩略图功能
  2. add_theme_support( 'post-thumbnails' );
  3. //仅在post中使用缩略图功能
  4. add_theme_support( 'post-thumbnails', array( 'post' ) );
  5. //仅在page中使用缩略图功能
  6. add_theme_support( 'post-thumbnails', array( 'page' ) );
  7. //仅在 post 和 movies 中使用
  8. add_theme_support( 'post-thumbnails', array( 'post', 'movie' ) );

在需要显示缩略图的文章页面中我们要检查是否已经设置日志缩略图:

  1. if ( has_post_thumbnail() ) {
  2. 	the_post_thumbnail();
  3. }

设置缩略图大小

  1. set_post_thumbnail_size( 120, 120, true );
  2. //前面两个参数分别为-宽、高
  3. //后面参数为是否裁剪图片到这么大 true为裁剪

注意,设置了缩略图大小之后,并不是说你输出特色图像的时候就直接输出这个大小,这个代码的功能只是在你设置缩略图的时候将那个图片生成了一个你设定大小的图片。输出特色图像的时候还是要加上大小,不然就会输出原图。

Custom Background(持定义背景)

3.4 版本引进让主题支持定义背景。

  1. add_theme_support( 'custom-background' );

设置默认背景的参数:

  1. $defaults = array(
  2. 	'default-color'          => '',
  3. 	'default-image'          => '',
  4. 	'wp-head-callback'       => '_custom_background_cb',
  5. 	'admin-head-callback'    => '',
  6. 	'admin-preview-callback' => ''
  7. );
  8. add_theme_support( 'custom-background', $defaults );

Custom Header(支持自定义头部图像)

3.4 版本引进的让主图支持自定义头图。

  1. add_theme_support( 'custom-header' );

请注意您可以添加的默认参数列表:

  1. $defaults = array(
  2. 	'default-image'          => '',     //默认图像
  3. 	'random-default'         => false,  //是否默认随机
  4. 	'width'                  => 0,      //宽度
  5. 	'height'                 => 0,      //高度
  6. 	'flex-height'            => false,
  7. 	'flex-width'             => false,
  8. 	'default-text-color'     => '',     //默认文本颜色
  9. 	'header-text'            => true,   //顶部文本开关
  10. 	'uploads'                => true,   //是否允许上传
  11. 	'wp-head-callback'       => '',
  12. 	'admin-head-callback'    => '',
  13. 	'admin-preview-callback' => '',
  14. );
  15. add_theme_support( 'custom-header', $defaults );

Feed Links(头部自动生成 RSS 地址)

这个功能让 WordPress 自动在主题 head 添加 日志和留言的 RSS feed links。这个功能是在 3.0 版本引进的。

  1. add_theme_support( 'automatic-feed-links' );

需要在你的主题头部位置放置头部钩子,这样才会自动生成rss地址。

  1. <head >
  2. wp_head();
  3. </head >

源文件

wp-includes/theme.php
官方文档:http://codex.wordpress.org/zh-cn:函数参考/add_theme_support