Products
GG网络技术分享 2025-03-18 16:14 0
大家好，这个分享一下“WordPress页面”和“幻灯片Slider”之间的关系。默认情况下，这两个东西没有任何关系。WordPress页面功能单一，幻灯片Slider是单独的插件，它们之间并不关联。但是安装了安装主题之后，页面和幻灯片就会产生关联。
以Avada主题为例。这个主题支持四种幻灯片(如下图)。Avada主题自带两种幻灯片。还集成了两个商业幻灯片，分别是Slider Revolution 和Layer Slicer，这两个都是（付费）插件。
以Slider Revolution插件为例（如下图），在Slider Revolution插件里可以创建多个幻灯片（组图），每个幻灯片（组图）都有个唯一的名字（这个很重要），每个幻灯片里面包含多张图片、或者多个场景，不同的场景之间循环播放，每个场景都有独立的背景图和前台文字。
本课时完整版内容收录在《WordPress主题公共课》教程中
对于WordPress拓展性这么优秀的程序来说，是没有什么不能实现的。很多在建站的时候，都会选择在首页使用幻灯片，可以展示比较醒目的内容。今天就来一个首页幻灯片的制作教程，相信幻灯片在各种企业包括个人网站上面用处还是很大的，做完之后效果和本站首页的一样。
主要是使用了WordPress的自定义文章字段的功能来判断是否需要显示在首页：
1.创建Post Meta Box
| /* Fire our meta box setup function on the post editor screen. */ add_action( \'load-post.php\', \'sola_post_meta_boxes_setup\' ); add_action( \'load-post-new.php\', \'sola_post_meta_boxes_setup\' ); /* 这是需要修改的两处之一，本功能只需要一个checkbox，将checkbox的title、id等属性填充到$fields数组中, 后面的代码会自动根据数组填充的内容创建Post Meta Box */ $fields = array( array( \'name\' => __(\'是否在首页幻灯显示\'), \'desc\' => \'Check this box and make the post a slider\', \'id\' => \'sola-post-slider\', \'type\' => \'checkbox\', \'default\' => \'\' ) ); /* Meta box setup function. */ function sola_post_meta_boxes_setup() { /* Add meta boxes on the \'add_meta_boxes\' hook. */ add_action( \'add_meta_boxes\', \'sola_add_post_meta_boxes\' ); add_action( \'save_post\', \'sola_save_post_meta_boxes\', 10, 2 ); } /* Create one or more meta boxes to be displayed on the post editor screen. */ /* 这里也需要改一下，设置需要创建的Post Meta Box叫什么名字，显示在什么位置 */ function sola_add_post_meta_boxes() { add_meta_box( \'sola-post-slider-class\', // Unique ID __(\'首页幻灯片\'), // Title \'sola_seo_box_format\', // Callback function \'post\', // Admin page (or post type) \'side\', // Context \'default\' // Priority ); } function sola_seo_box_format(){ global $fields,$post; // Use nonce for verification echo \'<input type=\"hidden\" name=\"sola_meta_box_nonce\" value=\"\', wp_create_nonce(basename(__FILE__)), \'\" />\'; echo \'<table class=\"form-table\">\'; foreach ($fields as $field) { // get current post meta data $meta = get_post_meta($post->ID, $field[\'id\'], true); echo \'<tr>\'. \'<th><label for=\"\'. $field[\'id\'] .\'\">\'. $field[\'name\']. \'</strong></label></th>\'. \'<td>\'; switch ($field[\'type\']) { case \'text\': echo \'<input type=\"text\" name=\"\'. $field[\'id\']. \'\" id=\"\'. $field[\'id\'] .\'\" value=\"\'. ($meta ? $meta : $field[\'default\']) . \'\" size=\"30\" style=\"width:97%\" />\'. \' \'. $field[\'desc\']; break; case \'textarea\': echo \'<textarea name=\"\'. $field[\'id\']. \'\" id=\"\'. $field[\'id\']. \'\" cols=\"60\" rows=\"4\" style=\"width:97%\">\'. ($meta ? $meta : $field[\'default\']) . \'\'. \' \'. $field[\'desc\']; break; case \'select\': echo \'<select name=\"\'. $field[\'id\'] . \'\" id=\"\'. $field[\'id\'] . \'\">\'; foreach ($field[\'options\'] as $option) { echo \'<option \'. ( $meta == $option ? \' selected=\"selected\"\' : \'\' ) . \'>\'. $option . \'</option>\'; } echo \'</select>\'; break; case \'radio\': foreach ($field[\'options\'] as $option) { echo \'<input type=\"radio\" name=\"\' . $field[\'id\'] . \'\" value=\"\' . $option[\'value\'] . \'\"\' . ( $meta == $option[\'value\'] ? \' checked=\"checked\"\' : \'\' ) . \' />\' . $option[\'name\']; } break; case \'checkbox\': echo \'<input type=\"checkbox\" name=\"\' . $field[\'id\'] . \'\" id=\"\' . $field[\'id\'] . \'\"\' . ( $meta ? \' checked=\"checked\"\' : \'\' ) . \' />\'; break; } echo \'<td>\'.\'</tr>\'; } echo \'</table>\'; } function sola_save_post_meta_boxes($post_id) { global $fields, $post; //Verify nonce if (!wp_verify_nonce($_POST[\'sola_meta_box_nonce\'], basename(__FILE__))) { return $post_id; } //Check autosave if (defined(\'DOING_AUTOSAVE\') && DOING_AUTOSAVE) { return $post_id; } //Get the post type object. $post_type = get_post_type_object( $post->post_type ); //Check permissions if ( !current_user_can( $post_type->cap->edit_post, $post_id ) ) return $post_id; foreach ($fields as $field) { $old = get_post_meta($post_id, $field[\'id\'], true); $new = $_POST[$field[\'id\']]; if ($new && $new != $old) { update_post_meta($post_id, $field[\'id\'], $new); } elseif (\'\' == $new && $old) { delete_post_meta($post_id, $field[\'id\'], $old); } } } |
这段代码会在文章创建和编辑页面创建如下所示的Post Meta Box :
写文章时，勾选在首页显示幻灯片，这篇文章就会自动推送到首页幻灯片中。
2.读取幻灯片文章
接下来修改slider.php，使用post meta box实现，就需要根据post的meta信息搜索幻灯片，代码如下
| $args = array( \'posts_per_page\' => 4, \'meta_key\' => \'sola-post-slider\', \'meta_value\' => \'on\', ); query_posts($args); |
用get_posts()和meta_query参数结合，就可以达到目的，有了数据，直接循环输出就行
希望本文所述对大家基于wordpress的程序设计有所帮助。
Demand feedback
