2018-09-07零分笔记 , 2,645 阅读0 评论

在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里!
阅读全文

2018-09-02零分笔记 , , 2,346 阅读0 评论

对于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标签链接!    

2018-08-22零分笔记 , 893 阅读0 评论

自适应例如九宫格,图片或者DIV特别是图片宽度100%,如何让高度也能始终保持一个比例?避免出现高低不齐的现象! 1、利用JS控制,监听图片的宽度,再设置图片的高度 2、纯CSS设置图片宽度和高度始终保持比例 2.1、原理:利用padding-top(padding-bottom)的百分比计算是根据层宽度的宽度计算的,如层宽度100px,padding-top:20%就是20px;设置一个外层padding-top(padding-bottom)的空白空间,让内层去填充!如设置一个始终保持正方形的图片,将父层设置padding-top(padding-bottom)100%,宽度100%,高0,得到一个正方形空白空间,内层图片标签img设置position:absolute浮动左0,顶部0,高度100%,宽度100%(图片的高度宽度百分比是根据父层计算!) 填满父层padding出来的正方形空白空间! 2.2、实例:给img加一个父层imgbox <div class="imgbox"> <img src="imgurl"> </div> 2.3、添加CSS .imgbox{ position: relative; width: 100%; height: 0px; padding-top: 100%; //padding-bottom都可以 } .imgbox img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

2018-08-19零分笔记1,617 阅读0 评论

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

2018-08-17零分笔记 , , 1,077 阅读0 评论

前台HTML页面 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(function(){ $("#send").click(function(){ var cont = $("input").serialize(); $.ajax({ url:'ab.php', type:'post', dataType:'json', data:cont, success:function(data){ var str = data.username + data.age + data.job; $("#result").html(str); }, error:function(mgs) { //失败时         } }); }); }); </script> </head> <body> <div id="result">一会看显示结果</div> <form id="my" action="" method="post"> <p><span>姓名:</span><input type="text" name="username" /></p> <p><span>年龄:</span><input type="text" name="age" /></p> <p><span>工作:</span><input type="text" name="job" /></p> </form> <button id="send">提交</button> </body> </html>   php接收页 <?php header("Content-type:text/html;charset=utf-8"); $username = $_POST['username']; $age = $_POST['age']; $job = $_POST['job']; $json_arr = array("username"=>$username,"age"=>$age,"job"=>$job); $json_obj = json_encode($json_arr); echo $json_obj; ?>

2018-08-08零分笔记 , , 891 阅读0 评论

在百度搜索了不少的切换焦点图,代码太长,功能无法满足需求,最后还是静下心来自己写一个,代码很简单,就是JQ的拼接,主要是JS。 设置自适应窗口大小:$(window).resize(), 播放:setInterval(‘sider(“#sider”)’, 2000); 无线触摸滑动:touch HTML: <div id="banner">   <ul id="sider">   <li><img src="img/1.jpg" alt="" /></li>   <li><img src="img/2.jpg" alt=""/></li>   <li><img src="img/3.jpg" alt="" /></li>   <li><img src="img/4.jpg" alt="" /></li>   </ul>   <ul id="sort_dot">   <li></li><li></li><li></li><li></li>   </ul>   </div>   <input type="button" value="left" class="left"/>   <input type="button" value="right" class="right"/>   <input type="button" value="改变大小" class="change"/>   CSS: *{             padding: 0;             margin: 0;         } #sort_dot{width:80%;}         ul li{list-style-type: none}         #banner{             overflow: hidden;         }         #banner ul{             overflow: hidden;         }         #banner ul>li{             float: left;         }         img{             max-width: 100%;         } JS: function sider(div){ if(count==$li.length-1){ count=0;              }else{ count=count+1;              } $(div).animate({marginLeft:-w*count},600); } var myar = setInterval('sider("#sider")', 2000);  $(function () { $("#sider").hover(function () { clearInterval(myar); }, function () {myar = setInterval('sider("#sider")', 2000) });  }) //初始化 var $li=$("#sider>li"),    w=800,             h=400, count=0; $("#sider>li").width(w); $("#banner").width(w); $("#sider").width(w*$li.length*2); $("#sider>li").height(h); $("#banner").height(h); $("#sider").height(h); $("#sider>li>img").height(h); $("#sider>li>img").width(w);        $('.right').click(function () {    clearInterval(myar); if(count==$li.length-1){ count=0; }else{ count=count+1; } $("#sider").animate({marginLeft:-w*count},600); myar = setInterval('sider("#sider")', 2000);             })             $('.left').click(function () { clearInterval(myar); if(count==0){ count=$li.length-1; }else{ count=count-1; } $("#sider").animate({marginLeft:-w*count},600); myar = setInterval('sider("#sider")', 2000);         }) $('.change').click(function () { w=900; h=500; $("#sider>li").width(w); $("#banner").width(w); $("#sider").width(w*$li.length*2); $("#sider>li").height(h); $("#banner").height(h); $("#sider").height(h); $("#sider>li>img").height(h); $("#sider>li>img").width(w); }) //手持滑动  var sx,ex,mx,touch; $('#sider>li').on('touchstart',function(e) {     touch = e.originalEvent.targetTouches[0];     sx = touch.pageX; }); $('#sider>li').on('touchend',function(e) {     touch = e.originalEvent.changedTouches[0];     ex = touch.pageX;     mx=ex-sx; if(mx>30){ clearInterval(myar); if(count==0){ count=$li.length-1; }else{ count=count-1; } $("#sider").animate({marginLeft:-w*count},600); myar = setInterval('sider("#sider")', 2000); } if(mx<-30){ clearInterval(myar); if(count==$li.length-1){ count=0; }else{ count=count+1; } $("#sider").animate({marginLeft:-w*count},600); myar = setInterval('sider("#sider")', 2000); } //function结束标示 });

2018-08-05零分笔记 , 792 阅读0 评论

input经常无法与其他元素对齐,通常用外层来包裹input,设置外层样式CSS,如依旧无法达到理想的效果,只能将input块级元素化 1、给input添加CSS属性:display:block 添加display将元素显示为块级元素,前后会带有换行符,用float来排列input 2、给input添加CSS属性:display:inline-block 将元素显示为行内块元素,上下对齐用CSS:vertical-align: bottom; 底部对齐

2018-08-03零分笔记 , 1,842 阅读0 评论

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

2018-08-03零分笔记 , 1,823 阅读0 评论

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中设置略缩图