begin主题二次开发-自定义首页幻灯片

begin的首页幻灯片，都是针对于文章的。具体使用参考鸟哥的帮助文章。

显然我们希望可以自定义的啦。那么如果写死也可以，但是如果会经常换，还是利用后台设置。下面开始分两个阶段，一个是后台的录入，一个是前台的输出。

增加一个TAB

首先找到后台设置的文件：/wp-content/themes/begin/inc/options/options.php

  1. // 找到
  2.     $options[] = array(
  3.         'name' => '基本设置',
  4.         'type' => 'heading'
  5.     );
  6. // 在这个上面增加
  7.     $options[] = array(
  8.         'name' => '幻灯片设置',
  9.         'type' => 'heading'
  10.     );

这样，就多了一个幻灯片的独立设置TAB页面，以分开来设置比较方便直观。

增加开关

然后，如果你想文章幻灯也不切割，一并保留或者设置个开关也不错。如下：

  1. // 上面加入的代码后面增加
  2.     $options[] = array(
  3.         'name' => '开启自定义幻灯',
  4.         'desc' => '勾选显示',
  5.         'id' => 'slidercustom',
  6.         'std' => '0', /* 默认值 */
  7.         'type' => 'checkbox'
  8.     );
  10.     $options[] = array(
  11.         'name' => '开启文章幻灯',
  12.         'desc' => '勾选显示',
  13.         'id' => 'sliderblog',
  14.         'std' => '0',
  15.         'type' => 'checkbox'
  16.     );

增加幻灯片自定义

设置好了开关，可以来设置幻灯片的图片、URL或者其他属性。如下：

  1. // 在上面的代码后面增加如下代码
  2.     $options[] = array(
  3.         'name' => '幻灯片1',
  4.         'desc' => '宽度大于等于760px，高度保持统一。',
  5.         'id' => 'slidermedia1',
  6.         "std" => "",
  7.         'type' => 'upload'
  8.     );
  10.     $options[] = array(
  11.         'name' => '幻灯片1链接地址',
  12.         'desc' => '链接地址，留空则无链接。',
  13.         'id' => 'sliderurl1',
  14.         'std' => '',
  15.         'type' => 'text'
  16.     );
  18.     $options[] = array(
  19.         'name' => '幻灯片1描述',
  20.         'desc' => '描述内容',
  21.         'id' => 'slideralt1',
  22.         'std' => '',
  23.         'type' => 'text'
  24.     );
  25. // 多个请复制，把数字“1”修改即可

一般预留六个都够用了，弄太多也影响网站打开速度哇。为了展示起来美观，加入个横线，代码：

  1. // 需要横线的地方，加入
  2.     $options[] = array(
  3.         'id' => 'clear'
  4.     );

界面效果图

begin主题二次开发-自定义首页幻灯片

注意一点，所有幻灯片的高度都要一致，不然会很丑的说。

前台输出

幻灯片文件按照之前的说法，查找到是：/wp-content/themes/begin/inc/slider.php

首先，我们在后台设置了可配置参数，我们前台输出，可以这样简单的写：

  1. <li>
  2.     <a href="<?php echo zm_get_option("sliderurl1"); ?>" rel="bookmark"><img src="<?php echo zm_get_option("slidermedia1"); ?>"></a>
  3. </li>

那么，当我们想要多个怎么办？复制几个改一二三四五？其实可以利用for函数解决这个问题：

  1. <?php for($i=1;$i<7;$i++) { ?>
  2.     <li>
  3.         <a href="<?php echo zm_get_option("sliderurl$i"); ?>" rel="bookmark"><img src="<?php echo zm_get_option("slidermedia$i"); ?>"></a>
  4.     </li>
  5. <?php } ?>

这里设置 $i 的值是1，最大是6，也就是小于7，累加递增。循环一次就+1。这样可以循环六次。但是，如果有时候我们并不需要全部设置呢？总不能后面没图片而样式丑陋吧？所以这里需要利用到for循环里面的一个函数“break”，这个用于跳出循环。代码如下：

  1. <?php for($i=1;$i<7;$i++) {
  2.     if (zm_get_option("slidermedia$i") == "" ) break;
  3. ?>
  4.     <li>
  5.         <a href="<?php echo zm_get_option("sliderurl$i"); ?>" rel="bookmark"><img src="<?php echo zm_get_option("slidermedia$i"); ?>"></a>
  6.     </li>
  7. <?php } ?>

第二行的代码，是判断图片设置的值是否为空，控制跳出这个循环。

但是还有一个情况，图片设置，不设置url地址呢？所以也要加入URL空值的判断。代码如下：

  1. <?php for($i=1;$i<7;$i++) {
  2.     if (zm_get_option("slidermedia$i") == "" ) break;
  3. ?>
  4.     <?php if (zm_get_option("sliderurl$i") == "" ) { ?>
  5.         <li>
  6.             <img src="<?php echo zm_get_option("slidermedia$i"); ?>">
  7.         </li>
  8.     <?php } else { ?>
  9.         <li>
  10.             <a href="<?php echo zm_get_option("sliderurl$i"); ?>" rel="bookmark"><img src="<?php echo zm_get_option("slidermedia$i"); ?>"></a>
  11.         </li>
  12.     <?php } ?>
  13. <?php } ?>

上面判断是否有URL，空的话，则不加入链接，不是空则加入链接，且输出链接。

到这里基本完成了。不过两个开关还需要拿出来判断下。示例代码如下：

  1. <?php if (zm_get_option('slidercustom')) { ?>
  2.     <!-- 自定义幻灯有开则显示 -->
  3. <?php } ?>

把另外的判断“sliderblog”的代码，加在原来输出文章幻灯代码的地方即可控制。例子如上。

总结

OK，整个思路就是这样。具体需要大家实践。这里涉及到的PHP基础参考如下：

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

目前评论：30   其中：访客  0   博主  0

  1. avatar 囧rz的网站 1
    回复 2016年02月22日 03:43  沙发

    虽然看不懂，但是既然来了，还是留下脚印！

  2. avatar chencool.com 0
    回复 2016年03月03日 04:20  板凳

    不错，改天学习一下~~顺便测试一楼层~

  3. avatar 点思博客 0
    回复 2016年03月30日 21:40  地板

    懂技术就是吊！

  4. avatar 罗罗 0
    回复 2016年04月05日 19:07  4楼

    您好，begin主题CMS设置中，通过自定义栏目调用好像有问题，文章发布后会自动添加了一个Views，编辑的时候添加其他的不能保存进去。所以想把这里的通过自定义栏目调用改为通过标签调用，在cms-postimg.php中这个地方不知道怎么改，还望指教一下，谢谢~
    zm_get_option(‘key_img_n’), ‘showposts’ => zm_get_option(‘post_img_n’), ‘ignore_sticky_posts’ => 1, ‘post__not_in’ => $do_not_duplicate ) ); while ( have_posts() ) : the_post(); ?>

    • avatar yumanutong 5
      回复 2016年04月08日 21:48  地下1层

      @罗罗 自定义栏目是自己点击输入，然后输入自定义字段的，没问题。详细参考鸟哥的使用教程！

  5. avatar fincent 0
    回复 2016年04月27日 10:55  5楼

    请教一个问题 ，用的是begin1.8 ，文章后面的分享功能，分享到qq空间，微信，还是微博都不能抓取特色图片，这个应该怎么弄，求解答，谢谢！我看过了，你这个是能实现的

  6. avatar linhut 0
    回复 2016年07月23日 07:35  6楼

    options里没有options.php文件，是需要自己新加的么

  7. avatar Madman 0
    回复 2016年08月02日 23:39  7楼

    请问你博客中的代码线条怎么弄得

  8. avatar 自来也 0
    回复 2016年08月20日 12:44  8楼

    大神，这款主题的暗箱功能怎么开启？可以简单的指导一下吗？

  9. avatar 电影光年 1
    回复 2016年10月08日 14:39  9楼

    这么改了幻灯片还支持外链吗

  10. avatar 电影光年 1
    回复 2016年10月08日 19:09  10楼

    begin2.0试了下，幻灯片和描述那里都可以，但是幻灯片链接地址那里不行，无法保存…每次保存后都是空的

    • avatar yumanutong 5
      回复 2016年10月27日 02:12  地下1层

      @电影光年 当时2.0 没出来。有空研究看看。按道理都是可以的，你print_r 打印下

评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

图片 表情