当前位置:首页» 乱折腾事 » WordPress
零分 2018.12.19 WordPress , 141 读 0 评

零分 2018.05.24 WordPress , , 428 读 0 评
一般来说,WordPress后台的菜单不会太多,不过,一些企业站,商城站,之类的可能会有很多分类,很多菜单,折叠起来,看着就比较清爽的多了!也方便的多了! 没有折叠起来,是非常非常长的! 折叠伸缩起来,就不一样了,也方便管理!插件安装号后无需设置! 插件下载地址:Menu_Management_Enhancer_for_WordPress  
零分 2018.05.23 WordPress , , 526 读 0 评
WordPress多级菜单设置很简单,几乎所有的主题都会有菜单设置选项 但是,设置的多级菜单能利用CSS控制的样式,三级以上就不好控制,查看源码,二级及以上ul的class都是sub-menu,想要通过添加CSS来操作三级以上的菜单样式,是比较累的。好在可以通过Walker_Nav_Menu函数来控制ul的class样式,在function.php中插入以下函数 /** * Header_Menu_Walker类 * 这类名当然你随意了 */ class Header_Menu_Walker extends Walker_Nav_Menu { /** * start_lvl函数 * 这函数主要处理ul,如果ul有一些特殊的样式,修改这里 * 他这里面的$depth就是层级,一级二级三级 * $args是上面wp_nav_menu()函数定义的那个数组 * */ function start_lvl( &$output, $depth = 0, $args = array() ) { $indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // 缩进 $display_depth = ( $depth + 1); // 层级默认是0级,这里+1为了从1开始算 $classes = array( 'sub-menu', //ul是个子菜单的时候,添加这个样式 ( $display_depth % 2 ? 'menu-odd' : 'menu-even' ), //子菜单奇数加样式menu-odd,偶数加样式menu-even ( $display_depth >=2 ? 'sub-sub-menu' : '' ), //三级菜单的时候,添加这个样式 'menu-depth-' . $display_depth, //这样式主要能看出当前菜单的层级,menu-depth-2是二级呗 ); $class_names = implode( ' ', $classes ); //用空格分割多个样式名 $output .= "\n" . $indent . '' . "\n"; //把刚才定义的,那么多的样式,写到ul里面 } /** * start_el函数 * 主要处理li和里面的a * $depth和$args同上 * * @param string $output Passed by reference. Used to append additional content. * @param object $item Menu item data object. * @param int $depth Depth of menu item. Used for padding. * @param array $args An array of arguments. @see wp_nav_menu() * @param int $id Current item ID. */ function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) { global $wp_query; $indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // 缩进 // 定义li的样式 $depth_classes = array( ( $depth == 0 ? 'main-menu-item' : 'sub-menu-item' ), //一级的li,就main-menu-item,其余全部sub-menu-item ( $depth >=2 ? 'sub-sub-menu-item' : '' ), //三级的li,添加这个样式 ( $depth % 2 ? 'menu-item-odd' : 'menu-item-even' ), //奇数加样式menu-item-odd,偶数加样式menu-item-even 'menu-item-depth-' . $depth, //层级同上 ); $depth_class_names = esc_attr( implode( ' ', $depth_classes ) ); $classes = empty( $item->classes ) ? array() : (array) $item->classes; $class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) ); //这句我没看懂,不知道是在干啥 // 把样式合成到li里面 $output .= $indent . ''; // 处理a的属性 $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $attributes .= ' class="menu-link ' . ( $depth > 0 ? 'sub-menu-link' : 'main-menu-link' ) . '"'; //添加a的样式 $item_output = sprintf( '%1$s%3$s%4$s%5$s%6$s', $args->before, $attributes, $args->link_before, apply_filters( 'the_title', $item->title, $item->ID ), $args->link_after, $args->after ); //上面这个item_output我要说一下。这里写的有点死。 //如果一级菜单是我是菜单 //然而其他级菜单是我是菜单 //这样的情况,$args->link_before是固定值就不行了,要自行判断 //$link_before = $depth == 0 ? '' : ''; //$link_after = $depth == 0 ? '' : ''; //类似这个意思。 $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } 另附一段显示菜单描述的函数 function start_el(&$output, $item, $depth, $args) { global $wp_query; $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; $class_names = $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ); $class_names = ' class="' . esc_attr( $class_names ) . '"'; $output .= $indent . ''; $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $item_output = $args->before; $item_output .= ''; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $this_item_description.=''; $this_item_description_all=explode('+',$item->description); foreach($this_item_description_all as $this_item_description_all){ $this_item_description_one=explode('|',$this_item_description_all); $this_item_description.=''.$this_item_description_one[1].''; } $item_output .= '' . $this_item_description . ''; $item_output .= ''; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } 这样,用css控制就比较好控制了,不同级别的ul样式class是不一样的!
零分 2018.05.12 WordPress , 387 读 0 评
原本计划一周完成的一个模板,陆陆续续的花了好几个星期的时间,算是第一次写的博客主题,没有亮点,只是平凡简单的自用博客主题 顺便写了一个无线端CSS,通过PHP判断是否为无线,无线时调用无线CSS,感觉字体设置的太小了 主题后台有个简单的设置项。自用还算习惯!
零分 2018.04.25 WordPress , , 511 读 0 评
WordPress主题通过注册多个小工具让整站都可以通过后台小工具布局 1、注册多个小工具 if ( function_exists('register_sidebar') ) register_sidebar(array( 'name'=>'侧边栏布局', 'before_widget' => '', 'after_widget' => '', 'before_title' => '', 'after_title' => '', )); if ( function_exists('register_sidebar') ) register_sidebar(array( 'name'=>'主页布局', 'before_widget' => '', 'after_widget' => '', 'before_title' => '', 'after_title' => '', )); 效果: 2、添加小工具,如文章目录、文章评论等 class val extends WP_Widget{ function val(){ //这是定义小工具信息的函数,也是类的构建函数 } function form($instance){ //如果之前没有数据的话,设置两个默认量 $instance = wp_parse_args((array)$instance,array( 'title'=>'','orderby'=>'','order'=>'' )); //输出后台小工具表单 echo $output; } function update($new_instance,$old_instance){ $instance = $old_instance; //数据处理 return $instance; } function widget($args,$instance){ extract($args); //前台显示 echo $after_widget; } } function val(){ //注册小工具 register_widget('val'); } //widges_init,小工具初始化的时候执行val函数, add_action('widgets_init','val'); 3、将模块拖入到对应的面板 前台调用小工具: dynamic_sidebar( '侧边栏布局' ); 将所有的函数全部都封装到小工具里,实现通过拖动来自定义WordPress主题的布局
零分 2018.04.17 WordPress , , 304 读 0 评
自从找了一份正经的工作之后,就一直都没有去管这个博客,看了下日期,似乎有一年没有去写过了。 不知道从什么时候开始,博客打开的加载速度一直很慢,期间也找过原因,比如删除谷歌字体。 然,一直都无法解决这个很慢的问题。 最近,感觉这个主题的确挺老的了,打算重写一个博客主题,参考下了代码 发现一段百度链接,而这段百度链接似乎很早以前就无法访问了。 这段是无线端打开跳转到百度无线适配的,也不知道什么时候开始,百度竟然无法打开了。 抱着试试的态度,试着删除这段JS,打开终于正常了!
零分 2015.10.11 WordPress , , 2,740 读 0 评
chuxia小清新wordpress博客主题,会出现部分外链的图片无法在略缩图显示,原因是因为timthumb.php! 修改下 主题下的timthumb.php文件 第一种,添加允许显示的外链图片地址,搜索$ALLOWED_SITES = array(大概在131行),在)内加入图片外链的服务器,如img.32xp.com即可. 第二种是允许全部图片,直接搜索ALLOW_ALL_EXTERNAL_SITES(大概在33行左右),看到一行define (‘ALLOW_ALL_EXTERNAL_SITES’, false);把false改成true即可! 这样前面的图片就都可以显示了!
零分 2015.10.08 WordPress , , 2,249 读 0 评
无意中发现知更鸟的3D标签很好看,于是乎就拷了下来! 对于wordpress,重塑的代码可能不规范,大体是这样的! 引入一个JS文件(3dtag.js,点击下载) CSS: #tag_cloud_widget {     position: relative;     width: 240px;     height: 240px;     margin: 10px auto 10px } #tag_cloud_widget a {     position: absolute;     color: #fff;     background: #d02f53;     display: block;     text-align: center;     text-overflow: ellipsis;     whitewhite-space: nowrap;     top: 0;     left: 0;     padding: 3px 5px;     border: 0 } #tag_cloud_widget a:hover {     background: #d02f53;     display: block } #tag_cloud_widget a:nth-child(n) {     background: #666;     border-radius: 3px;     display: inline–block;     line-height: 18px;     margin: 0 10px 15px 0 } #tag_cloud_widget a:nth-child(2n) {     background: #d1a601 } #tag_cloud_widget a:nth-child(3n) {     background: #286c4a } #tag_cloud_widget a:nth-child(5n) {     background: #518ab2 } #tag_cloud_widget a:nth-child(4n) {     background: #c91d13 } html: <div id=“tag_cloud_widget”>      <a href=“/tag/%e6%95%99%e7%a8%8b/” class=“tag-link-192” title=“17个话题” style=“font-size: 14px;”>教程</a>      <a href=“/tag/firefox/” class=“tag-link-36” title=“28个话题” style=“font-size: 14px;”>Firefox</a>      <a href=“/tag/utility-software/” class=“tag-link-778” title=“100个话题” style=“font-size: 14px;”>实用软件</a>      <a href=“/tag/information/” class=“tag-link-12” title=“144个话题” style=“font-size: 14px;”>网文资讯</a>      <a href=“/tag/wpplugins/” class=“tag-link-8” title=“55个话题” style=“font-size: 14px;”>plugins</a>      <a href=“/tag/%e9%97%b2%e8%a8%80%e7%a2%8e%e8%af%ad/” class=“tag-link-258” title=“44个话题” style=“font-size: 14px;”>闲言碎语</a>      <a href=“/tag/hotnews%e4%b8%bb%e9%a2%98/” class=“tag-link-453” title=“46个话题” style=“font-size: 14px;”>HotNews主题</a>      <a href=“/tag/wordpress/” class=“tag-link-6” title=“362个话题” style=“font-size: 14px;”>WordPress</a>      <a href=“/tag/photoshop/” class=“tag-link-775” title=“33个话题” style=“font-size: 14px;”>Photoshop</a>      <a href=“/tag/hotnews-pro/” class=“tag-link-265” title=“78个话题” style=“font-size: 14px;”>HotNews Pro</a>      <a href=“/tag/wordpress-course/” class=“tag-link-128” title=“91个话题” style=“font-size: 14px;”>Wordpress教程</a>      <a href=“/tag/%e5%93%8d%e5%ba%94%e5%bc%8f/” class=“tag-link-617” title=“33个话题” style=“font-size: 14px;”>响应式</a>      <a href=“/tag/%e5%8e%9f%e5%88%9b%e4%b8%bb%e9%a2%98/” class=“tag-link-341” title=“46个话题” style=“font-size: 14px;”>原创主题</a>      <a href=“/tag/webdesign/” class=“tag-link-777” title=“137个话题” style=“font-size: 14px;”>Web前端</a>      <a href=“/tag/uidesign/” class=“tag-link-776” title=“39个话题” style=“font-size: 14px;”>设计资源</a>      <a href=“/tag/skill/” class=“tag-link-779” title=“85个话题” style=“font-size: 14px;”>实用技巧</a>      <a href=“/tag/css/” class=“tag-link-29” title=“19个话题” style=“font-size: 14px;”>CSS</a>      <a href=“/tag/jquery/” class=“tag-link-56” title=“47个话题” style=“font-size: 14px;”>JQuery</a>      <a href=“/tag/web%e8%ae%be%e8%ae%a1/” class=“tag-link-109” title=“20个话题” style=“font-size: 14px;”>Web设计</a>      <a href=“/tag/wordpress%e4%b8%bb%e9%a2%98/” class=“tag-link-347” title=“89个话题” style=“font-size: 14px;”>WordPress主题</a>      <div class=“clear”></div>    </div> PS:html仅仅只是演示,具体是用 <div id=“tag_cloud_widget”>  </ div>包含a标签,也就是标签云 演示:http://demo.32xp.com/demo/wordpress/3dtag.html
零分 2015.10.07 WordPress , 3,649 读 0 评
非插件wordpress点赞功能,其实就是调用wordpress自定义字段,通过AJAX提交修改wordpress字段的数值,和阅读次数差不多。 上图是最近写一个模版的文章底部的样式,现在帖下百度来的点赞代码: 1、在模版functions.php适合位置插入 //文章点赞开始 add_action(‘wp_ajax_nopriv_specs_zan’, ‘specs_zan’); add_action(‘wp_ajax_specs_zan’, ‘specs_zan’); function specs_zan(){     global $wpdb,$post;     $id = $_POST[“um_id”];     $action = $_POST[“um_action”];     if ( $action == ‘ding’){         $specs_raters = get_post_meta($id,’specs_zan’,true);         $expire = time() + 99999999;         $domain = ($_SERVER[‘HTTP_HOST’] != ‘localhost’) ? $_SERVER[‘HTTP_HOST’] : false; // make cookies work with localhost         setcookie(‘specs_zan_’.$id,$id,$expire,’/’,$domain,false);         if (!$specs_raters || !is_numeric($specs_raters)) {             update_post_meta($id, ‘specs_zan’, 1);         }         else {             update_post_meta($id, ‘specs_zan’, ($specs_raters + 1));         }         echo get_post_meta($id,’specs_zan’,true);     }     die; } //文章点赞结束 文章模版页添加JS代码: $.fn.postLike = function() {     if ($(this).hasClass(‘done’)) {         return false;     } else {         $(this).addClass(‘done’);         $(this).children(‘.zan’).html(“已赞”);         var id = $(this).data(“id”),         action = $(this).data(‘action’),         rateHolder = $(this).children(‘.count’);         var ajax_data = {             action: “specs_zan”,             um_id: id,             um_action: action         };         $.post(“/wp-admin/admin-ajax.php”, ajax_data,         function(data) {             $(rateHolder).html(data);         });         return false;     } }; $(document).on(“click”, “.specsZan”,     function() {         $(this).postLike(); }); 在文章模版页需要添加点赞按钮的地方添加代码: <a hidefocus= true href=“javascript:;” data-action=“ding” data-id=“<?php the_ID(); ?>” class=“specsZan <?php if(isset($_COOKIE[‘specs_zan_’.$post->ID])) echo ‘done’;?>”> <i></i> <span class=“zan” style=“margin-right:5px;”><?php if(isset($_COOKIE[‘specs_zan_’.$post->ID])){ echo ‘已赞’;}else{echo ‘赞’;}?></span><span class=“count”><?php if( get_post_meta($post->ID,’specs_zan’,true) ){echo get_post_meta($post->ID,’specs_zan’,true);} else {echo ‘0’;}?></span></a></div> 这样,一个wordpress非插件的点赞功能就出来了!CSS样式自行添加。 如果嫌麻烦,可以搜索安装相关的点赞插件,相对来说,非插件自定义的自由会比较大吧  
零分 2015.09.21 WordPress , 3,684 读 0 评
在wordpress the_content是输出文章内容,是带有标签的,比较明显的就是P标签了。 the_content 使用直接<?php the_content();?>,还有一个返回值  get_the_content,输出文章内容用 <?php echo get_the_content();?> 今天在做弹出图片效果的时候,auto highslide 插件没效果,用fancybox也没有效果,查看了下源码,fancybox需要添加几个参数,要对文章内容进行批量添加。直接用 <?php echo get_the_content();?> 发现全部都没有P标签。 用 <?php the_content();?>要在函数模版写一个修改的函数 function my_the_content_filter($content) {     $contents = preg_replace(‘~<img (.*?) src=(.*?)>~s’,'<center><img $1 src=“‘.get_bloginfo(“template_url“).’/img/loading.gif” data-original=$2></center>’,$content);     $pattern = “/<a(.*?)href=(‘|\”)([^>]*).(bmp|gif|jpeg|jpg|png)(‘|\”)(.*?)>(.*?)<\/a>/i”;     $replacement = ‘<a$1href=$2$3.$4$5 class=“fancybox” data-fancybox-group=“gallery” title=“‘.get_the_title().'” $6>$7</a>’;     $content = preg_replace($pattern, $replacement, $contents);       return $content;      }      add_filter( ‘the_content’, ‘my_the_content_filter’ ); 这边顺便对文章图片进行了一下居中,修改用正则。
TOP