标签wordpress文章 - 零分博客 - 关注互联网且乱扯淡互联网的个人博客

当前位置: 首页 » 标签：wordpress

wordpress相邻文章（下一篇下一篇）显示文章略缩图

wordpress相邻文章（下一篇下一篇）显示文章相邻文章的略缩图，如在没有略缩图时显示默认图片原理：通过文章ID调用略缩图，functions.php插入调用略缩图函数 if(function_exists('add_theme_support')){ add_theme_support( 'post-thumbnails' ); } function post_thumbnail($id=false){ if(has_post_thumbnail($id)){ //如果有缩略图，则显示缩略图 the_post_thumbnail($id); }else{ global $post, $posts; $post_img = ''; $post_content=$id?get_post($id)->post_content:$post->post_content; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post_content, $matches); $post_img_src = $matches [1][0]; $post_img = $post_img_src; //如果没有缩略图，则显示日志中的第一张图片 if(empty($post_img_src)){ //如果日志中没有图片，则显示默认图片 $post_img = get_bloginfo("template_url").'/images/noimg.jpg'; } $post_img = str_replace('//','//',$post_img); return $post_img; } } 文章列表可以直接通过post_thumbnail()调用，在上一篇下一篇中通过相邻文章的ID调用，上一篇文章ID：get_previous_post()->ID，下一篇文章ID：get_next_post()->ID，调用代码上一篇：post_thumbnail(get_previous_post()->ID) 下一篇：post_thumbnail(get_next_post()->ID) 当然也可以通过任意文章ID调用

笔记 · 1年前

wordpress添加编辑器可视化按钮代码

需要功能： 1、在编辑器可视化界面添加一个按钮 2、点击按钮弹出输入框添加按钮：在functions.php模板函数文件中添加插入按钮函数挂载函数到正确的钩子 function outurl_mce_button() { // 检查用户权限 if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) { return; } // 检查是否启用可视化编辑 if ( 'true' == get_user_option( 'rich_editing' ) ) { add_filter( 'mce_external_plugins', 'outurl_plugin' ); add_filter( 'mce_buttons', 'outurl_button' ); } } add_action('admin_head', 'outurl_mce_button'); 声明新按钮的脚本 function outurl_plugin( $plugin_array ) { $plugin_array['outurl'] = get_template_directory_uri() .'/images/js/outurl.js'; return $plugin_array; } 在编辑器上注册新按钮 function outurl_button( $buttons ) { array_push( $buttons, 'outurl' ); return $buttons; } outurl.js实现功能函数 (function () { tinymce.PluginManager.add('outurl', function (editor, url) { editor.addButton('outurl', { title: '添加外链', image: url+"/outurl.png", onclick: function () { //editor.insertContent('WPExplorer.com is awesome!'); editor.windowManager.open({ title: '请输入标签及外链', body: [ { label:'输入标签', type: 'textbox', name: 'outkey', minWidth: 400, minHeight: 30, multiline: false, value: '' }, { label:'输入链接', type: 'textbox', name: 'outurl', minWidth: 400, minHeight: 30, multiline: false, value: '' } ], onsubmit: function (e) { //获取输入内容 var outkey = e.data.outkey; var outurl = e.data.outurl; var urls=jQuery("#urls_value").val(); var urlarr=urls.split("[++++++++++]"); var i=urlarr.length; if(outkey.length > 0 && outurl.length > 0) { var txt=jQuery("#urls_value").val()+'[++++++++++]'+outurl; jQuery("#urls_value").val(txt); //将地址拼接到iframe ，输出到编辑器 editor.insertContent('[ outurl id='+i+']'+outkey+'[ /outurl]'); }else{ alert("标签和URL都不能为空！"); } } }); } }); }); })(); 最后处理短代吗 function outurl($atts,$content){ global $post; extract(shortcode_atts(array("id"=>'0'),$atts)); return '<a target="_blank" rel="nofollow" href="'.get_bloginfo("url").'/go?e='.$post->ID.'_'.$id.'_1_1_'.time().'">'.$content.'</a>'; } 以上是以博客外链为例

笔记 · 1年前

wordpress添加编辑器按钮

最近在写一个新的wordpress模板，其中有一个文章外链问题，需要在编辑器上添加一个按钮！基本功能是：点击按钮弹出输入框，在输入框内黏贴外来链接，短代码功能修改链接跳转go=xxx这样按钮移植这个博客的代码，发现问题： 1、不显示按钮 2、不支持jq 就算重新用这个博客的模板，一样无法使用这个功能，很奇怪，wordpress的版本是一样的！也就是两个完全一样的环境下，两个模板的一些功能无法使用！目前正在测试中，看具体是哪里的问题！

笔记 · 1年前

WordPress评论表单添加验证码

上次看到朋友的博客，垃圾评论竟然上万条，这得多久没有进入后台？还是没有清理的习惯？虽说，评论的用途似乎不是很大，WordPress现在折腾的人也少了吧。终究还是限制了一下评论，添加了一个验证码，且看下后续的效果原本是想把验证码放在“提交评论”左侧的，但折腾了半天，还是不知道怎么放过来，测试了一些钩子，似乎也都不行。暂且先这样吧！

笔记 · 1年前

Eson.X.Blog V4版发布

笔记 · 1年前

wordpress结合微信小程序API接口开发构想

wordpress结合小程序插件百度搜索下已经都有现成的，一般都是结合 WordPress API 插件给小程序提供JSON数据接口！像文章内有带图片，视频元素的，无法直接在小程序内显示小程序代码示例：之前一直考虑在小程序内处理文章数据，感觉比较累！是否可以通过数据源上处理？ WordPress上读取的文章，几乎都是用P标签分割段落和图片，视频，即，即便是图片img标签也会被P标签包裹！在读取的文章中以P标签分割，重组数组类似： array=array( "type"=>"txt",//例如：txt：文本，img：图片，video：视频... "content"=>"内容"//如果是图片或者视频，直接写提取地址 ); 小程序读取文章数据时，循环数组，用type判断是文章还是图片又或是视频剩下的就是小程序内样式

笔记 · 1年前

WordPress官网打不开无法更新及下载

wordpress官网最近一直无法打开，其实前段时间开始就已经很慢了，最近直接无法打开，导致无法更新及下载安装包，可能被墙！429 Too Many Requests 具体能持续多久，暂时无法得知，这里提供下最新更新包链接：https://downloads.wordpress.org/release/zh_CN/wordpress-5.2.4.zip 用下载工具或者百度云微云之类先离线到网盘上在下载！已经离线的共享地址：wordpress-5.2.4.zip提取码：t39d

笔记 · 2年前

JQAJAX实现wordpress无限下拉显示

wordpress无限下拉分页实现方法：通过JQ的AJAX来实现无限下拉分页，原理是通过JQAJAX获取下一页的html，提取指定内的文章列表放入当前页的指定容器内！ JQ ajax代码： $.ajax({ var geturl=$("#getpage a").attr("href");//下一页的链接 $("#getpage a").html("正在加载，请稍后....");//显示下一页链接的文本标签 type: "POST", url: geturl, success: function(data){ result = $(data).find("#thelist");//指定容器内的文章列表 page=$(data).find("#page");//获取分页导航 nextHref = $(data).find("#getpage a").attr("href");//获取下一页的链接，替换当前页的下一页链接 $("#thelist").append(result);//最近文本列表，显示下一页 $("#page").html(page);//替换分页导航 if(nextHref!=undefined ){ $("#getpage a").html("加载下一页");//替换下一页链接的文本标签 $("#getpage a").attr("href",nextHref)//替换下一页链接 }else{ $("#getpage").remove();//最后一页，已经全部加载完成时，移除下一页标签 } } }); wordpress模板PHP代码，先显示第一页 <div id="thelist"> <?php while (have_posts()) : the_post();?> <div class="theli thewidth "> <div class="img"> <span class="ib imgbox"> <a rel="bookmark" target="_blank" href="<?php echo get_the_permalink(); ?>"><img src="<?php echo post_thumbnail();?>"></a> <i class="ib cat"><a rel="bookmark" href="<?php echo get_category_link(get_the_category()[0]->term_id); ?>"><?php echo get_the_category()[0]->name ;?></a></i> </span> </div> <div class="content"> <h2><a rel="bookmark" target="_blank" href="<?php echo get_the_permalink(); ?>"><?php the_title();?></a></h2> <p class="ib info"> <i class="ib line"><?php the_author();?></i> <i class="ib line"><?php time_tran(get_the_time('U'));?></i> <?php if(get_the_tags()){$thistag='';foreach(get_the_tags() as $tag){$thistag.= '<a target="_blank" rel="bookmark" href="'.get_bloginfo('url').'/tag/'.$tag->name.'">'.$tag->name.'</a>,';} echo '<i class="ib line m_none">'.rtrim($thistag,",").'</i>';} ?> <i class="ib li"><?php post_views('阅读（', '）'); ?></i> </p> <div class="text"><?php echo strip_tags(apply_filters('the_content', $post->post_content)); ?></div> </div> <div class="btnbox"> <a rel="bookmark" target="_blank" href="<?php echo get_the_permalink(); ?>"><span class="ib link">阅读全文</span></a> </div> </div> <?php endwhile;wp_reset_query(); ?> </div> <div id="page"><?php par_pagenavi($pn); ?></div> <div id="getpage"><?php echo get_next_posts_link('加载下一页'); ?></div> wordpress无限下拉加载大概就时这种，其实，不管什么程序，下拉无限下载，也差不多都时这样的写法

笔记 · 3年前

wordpress根据自定义字段查询文章并统计文章篇数

wordpress可以根据自定义字段来分类文章，参考wordpress根据自定义字段查询文章，但是有一个问题，就是需要重写分页代码，通过自定义分类检出的文章，如果需要全部检出分页，默认在function里的分页代码可能不准确，默认不会计算自定义字段，可以通过 $allsearch = new WP_Query($args); $allsearch->max_num_pages; 取出分页数量

笔记 · 3年前

wordpress根据自定义字段查询文章

$args = array( 'posts_per_page' => 10, // 显示多少条 'paged' => $paged, // 当前页面 'orderby' => 'date', // 时间排序 'order' => 'desc', // 降序（递减，由大到小） 'meta_query' => array( array( 'key' => 'key1', // 你的使用的自定义字段1 'value' => 'value1' // 自定义字段1对应的值 ), array( 'key' => 'key2', // 你的使用的自定义字段2 'value' => 'key2' // 自定义字段2对应的值 ) ) ); query_posts($args); while (have_posts()) : the_post(); // 循环内容; endwhile;

笔记 · 3年前

wordpress文章内页添加可选广告

时代变迁，现今已经很少人写博客了，都玩自媒体，主要可能因为博客流量不好变现，联盟广告都被广告过滤插件过滤，就连广告图片都会被过滤折腾这个插入广告插件，最重要的原因还是因为折腾吧！图片链接：图片链接广告，输入图片链接地址和url链接地址，如：淘系商品：淘宝客类关键词API商品推荐，如：拼多多和京东的API暂未加入，百度广告是百度联盟广告，如：不过终究无法避免被浏览器的广告过滤插件过滤

随笔 · 3年前

wordpress5.2要求PHP5.6.20，低于PHP5.6.2的版本将无法升级或安装

今天登录后台，看到wordpress推送的5.2版本，发现更新时需要PHP5.6.2以上，低于这个PHP 版本的将无法升级，后续可能低于这个版本的将直接无法安装wordpress！您不能升级，因为WordPress 5.2要求PHP版本5.6.20或更高。您正在运行版本5.5.38。

资讯 · 3年前

WordPress页面模板创建页面开头空格

通过页面模板创建页面，在开头部位会有一个空格，这个问题在写上一次模板的时候就已经存在过，一直未能解决，之后只能通过调用API函数来替代今天在添加php QRcode API 的时候，因本地之前测试一直正常，在添加一个后台的自定义模块，在functions.php中引入代码，之后就开始出错，通过查看源码，创建的页面开头有空格！因为之前一直正常，所以就觉得是代码上的问题，通过往回撤回代码排除，发现原因是在引入的模块文件中最好带有空格符号（也可以可能是空白符）删除空白符，保存，刷新，测试，问题已解决！QRcode效果如右边二维码！

笔记 · 3年前

wordpress取消默认置顶输出

wordpress带有置顶输出功能，如果就一两篇文章置顶输出不影响到新发布的文章，如果置顶文章很多，新发布的文章可能就会跑到了第二页设置第三页了，需要置顶，先取消默认的置顶输出，让置顶文章按普通的输出方式输出在functions.php中添加 //取消置顶显示 function mychildtheme_filter_pre_get_posts( $query ) { $query->set( 'ignore_sticky_posts', true ); return $query; } add_filter( 'pre_get_posts', 'mychildtheme_filter_pre_get_posts' ); 如下另外需要置顶显示，重写一个置顶文章输出，控制数量！

笔记 · 3年前

wordpress5.0新版编辑器切换经典编辑器插件Classic Editor

wordpress5.0新版编辑器切换经典编辑器插件Classic Editor - 第三张

WordPress · 3年前

wordpress文章中插入外链隐藏跳转

笔记 · 3年前

wordpress输出简洁的菜单选项

之前使用菜单时都是在前台过滤，需要正则，今天百度了下，可以通过function直接过滤css输出！ function filter_nav_menu_css_class ($classes){ //想要通过的class值 $do_class_name = array('current-menu-item'); $outPut = array_intersect($do_class_name,$classes); array_filter( $classes ); return $outPut; }; add_filter('nav_menu_css_class','filter_nav_menu_css_class'); 这样输出的菜单CSS就只有保留了current-menu-item，来识别当前的，其他的都过滤，记录一下！

笔记 · 3年前

worpdress页面带自定义参数伪静态设置

找来很久，找到了以下伪静态设置方法，适用于带自定义参数页面的伪静态！如/a?id=页面在function.php中加入以下代码 add_filter( 'rewrite_rules_array','my_insert_rewrite_rules' ); add_filter( 'query_vars','my_insert_query_vars' ); add_action( 'wp_loaded','my_flush_rules' ); // flush_rules() if our rules are not yet included function my_flush_rules(){ $rules = get_option( 'rewrite_rules' ); if ( ! isset( $rules['a-(.*).html$'] ) ) { global $wp_rewrite; $wp_rewrite->flush_rules(); } } // Adding a new rule function my_insert_rewrite_rules( $rules ) { $newrules = array(); $newrules['a-(.*).html$'] = 'index.php?pagename=a&h=$matches[1]'; return $newrules + $rules; } function my_insert_query_vars( $vars ) { array_push($vars, 'h'); return $vars; } 调用ID <? echo $wp_query->query_vars['h']; ?>

笔记 · 4年前

wordpress给发布文章页添加自定义面板信息

在WordPress发布文章编辑器边上添加自定义面板字段，方便编辑，不用下拉寻找字段名效果：代码： <?php /* 后台自定义添加关键词和描述面板时间：2014-10-24 */ //1.创建需要的字段信息 $new_meta_boxes = array( "clickurl" => array( "name" => "clickurl", "std" => "", "title" => "直达链接："), "clickprice" => array( "name" => "clickprice", "std" => "", "title" => "优惠券金额：") , "dropdown" => array( "name" => "dropdown", "std" => "", "subtype"=>array( "tb"=>"淘宝", "tmall"=>"天猫", "jd"=>"京东" ), "title" => "来源：" ) ); //2.创建自定义字段输入框 function new_meta_boxes() { global $post, $new_meta_boxes; foreach($new_meta_boxes as $meta_box) { $meta_box_value = get_post_meta($post->ID, $meta_box['name'].'_value', true); if($meta_box_value == "") { $meta_box_value = $meta_box['std']; } // 自定义字段标题 echo "<div style='padding:10px 0;'>".$meta_box['title']."</div>"; if(isset($meta_box['subtype'])){ echo '<select class="postform" name="'.$meta_box['name'].'_value"> '; foreach($meta_box['subtype'] as $key => $entry){ if($meta_box_value==$key){ $selected = "selected='selected'"; }else{ $selected =""; } echo '<option value="'.$key.'" '.$selected.'>'.$entry .'</option> '; } echo '</select>'; }else{ // 自定义字段输入框 echo '<input name="'.$meta_box['name'].'_value" value="'.$meta_box_value.'"><br />'; } } echo '<input type="hidden" name="dj_metaboxes_nonce" id="dj_metaboxes_nonce" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'" />'; } //3.创建自定义字段模块 function create_meta_box() { global $theme_name; if ( function_exists('add_meta_box') ) { add_meta_box( 'new-meta-boxes', '详情信息', 'new_meta_boxes', 'post', 'side', 'low' ); } } //4.保存数据 function save_postdata( $post_id ) { global $new_meta_boxes; if ( !wp_verify_nonce( $_POST['dj_metaboxes_nonce'], plugin_basename(__FILE__) )) return; if ( !current_user_can( 'edit_posts', $post_id )) return; foreach($new_meta_boxes as $meta_box) { $data = $_POST[$meta_box['name'].'_value']; if($data == "") delete_post_meta($post_id, $meta_box['name'].'_value', get_post_meta($post_id, $meta_box['name'].'_value', true)); else update_post_meta($post_id, $meta_box['name'].'_value', $data); } } //5.将函数连接到指定action（动作） add_action('admin_menu', 'create_meta_box'); add_action('save_post', 'save_postdata'); ?> 添加到主题模板文件夹内的function.php里！

笔记 · 4年前

wordpress纯文本输出菜单项和标签云

对于WordPress的菜单wp_nav_menu()和标签云wp_tag_cloud()的这两个函数，用WordPress做站的博主站长都熟悉不过，这两个函数输出的都是html标签代码，WordPress内置默认的是return，如果当成赋值输出，可以设置下echo参数（wp_nav_menu()，echo值true和false，wp_tag_cloud()，echo值是0和1）默认的html代码输出，用css来设置样式可能有些繁琐，过滤掉默认的div，ul，li，只在最外侧包裹一个div，相对要简便将菜单wp_nav_menu()和标签云wp_tag_cloud()的这两个函数当成赋值时，可以通过过滤替换来过滤掉默认带的div，ul，li标签，PHP替换函数ereg_replace正则替换（PHP5.3以上版本可以使用preg_replace函数替换，两者正则有些不同，preg_replace正则多一个{}包含）最后输出结果就剩下一个A标签链接！

笔记 · 4年前

wordpress模板自定义函数继承

WordPress模板链接顶部也底部的函数是：<?php get_header(); ?>和<?php get_footer(); ?> 有时候如果要自定义一个函数，比如判断是否是手机打开，自定义了一个$ismobile=true; 一般会把这种函数定义到顶部文件，即：header.php文件上，模板文件<?php get_header(); ?>包含顶部文件时是无法调用到$ismobile这个函数！要不，将$ismobile定义在function里，要不就用include来引用header.php文件！ <?php get_header(); ?>只是引用一个function，并不是引用一个文件！

笔记 · 4年前

WordPress文章上传图片剪裁设置

WordPress上传图片，默认会有多个剪裁图片，事实上很多图片是用不到的，可以在后台设置减少剪裁仪表盘->setting->媒体设置略缩图尺寸，详细设置这个就已经够用了。中等尺寸和大尺寸可以设置为0,0表示不剪裁，设置好之后，上传图片就只有两个选择了，略缩图和原始尺寸空间上也就只有两种图片，一种是略缩图，一种是原始尺寸的图片，可以减少不少空间！

笔记 · 4年前

wordpress相关文章列表

WordPress相关文章列表，先获取标签相关文章，如标签下相关文章不能达到设置数量，获取同类目文章 <?php $i = 0; $post_num = 8;//设置文章显示数量 $exclude_id = $post->ID;//排查当前文章 $posttags = get_the_tags();//获取标签 if ( $posttags ) { $tags = ''; foreach ( $posttags as $tag ) $tags .= $tag->term_id . ','; $args = array( 'post_status' => 'publish', 'tag__in' => explode(',', $tags), 'post__not_in' => explode(',', $exclude_id), 'caller_get_posts' => 1, 'orderby' => 'comment_date', 'posts_per_page' => $post_num ); query_posts($args); while( have_posts() ) { the_post(); $i++; $exclude_id .= ',' . $post->ID; ?> <div class="about_good fl <?php if($i%2==0){echo 'li-2';} if($i%3==0){echo ' li-3';} if($i%4==0){echo ' li-4';}?>"> <a rel="bookmark" target="_blank" href="<?php the_permalink(); ?>"><?php post_thumbnail(); ?></a> <div class="title"><a rel="bookmark" title="详细阅读 <?php the_title(); ?>" target="_blank" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> </div> <?php } wp_reset_query();} if ( $i < $post_num ) { $cats = ''; foreach ( get_the_category() as $cat ) $cats .= $cat->cat_ID . ','; $args = array( 'category__in' => explode(',', $cats), 'post__not_in' => explode(',', $exclude_id),//排除标签已显示的文章 'caller_get_posts' => 1, 'orderby' => 'comment_date', 'posts_per_page' => $post_num - $i ); query_posts($args); while( have_posts() ) { the_post(); ?> <div class="about_good fl <?php if($i%2==0){echo 'li-2';} if($i%3==0){echo ' li-3';} if($i%4==0){echo ' li-4';}?>"> <a rel="bookmark" target="_blank" href="<?php the_permalink(); ?>"><?php post_thumbnail(); ?></a> <div class="title"><a rel="bookmark" title="详细阅读 <?php the_title(); ?>" target="_blank" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> </div> <?php } wp_reset_query(); }?> 以上带图片，需要在function中设置略缩图

笔记 · 4年前

WordPress后台多级菜单折叠插件

WordPress · 4年前

wordpress多级菜单样式

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是不一样的！

WordPress · 4年前

WordPress通过小工具自定义布局主题

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主题的布局

WordPress · 4年前

WordPress一直加载很慢的原因

自从找了一份正经的工作之后，就一直都没有去管这个博客，看了下日期，似乎有一年没有去写过了。不知道从什么时候开始，博客打开的加载速度一直很慢，期间也找过原因，比如删除谷歌字体。然，一直都无法解决这个很慢的问题。最近，感觉这个主题的确挺老的了，打算重写一个博客主题，参考下了代码发现一段百度链接，而这段百度链接似乎很早以前就无法访问了。这段是无线端打开跳转到百度无线适配的，也不知道什么时候开始，百度竟然无法打开了。抱着试试的态度，试着删除这段JS，打开终于正常了！

WordPress · 4年前

wordpress非插件3D彩色标签

无意中发现知更鸟的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标签，也就是标签云演示：//demo.32xp.com/demo/wordpress/3dtag.html

WordPress · 6年前

非插件wordpress点赞功能

非插件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样式自行添加。如果嫌麻烦，可以搜索安装相关的点赞插件，相对来说，非插件自定义的自由会比较大吧

WordPress · 6年前

wordpress the_content内容替换

在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’ ); 这边顺便对文章图片进行了一下居中，修改用正则。