自适应纯CSS图片宽度高度始终保持比例
自适应例如九宫格,图片或者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%;
}
笔记
·
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,并不是引用一个文件!
笔记
·
百度联盟升级防屏蔽广告代码
目前的浏览器广告屏蔽插件如ADBLOCK等都是广告JS链接,AD,等关键词屏蔽,百度升级的防屏蔽主要是绑定域名,利用站点域名防止广告屏蔽插件屏蔽广告!
1、解析域名CNAME到百度指定服务器
2、获取代码时是一段自己域名的JS,在短时间内,自己域名一般是不会被屏蔽的
但是,有一个担忧,会不会有一天,子域名的广告直接影响到了主域名?到时候域名被带红!
经过测试,依旧无法过超强的广告屏蔽,也就是,广告还是会被屏蔽!
资讯
·
php jq ajax json post实例
前台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;
?>
笔记
·
自适应支持鼠标手机触摸滑动切换图片焦点图
在百度搜索了不少的切换焦点图,代码太长,功能无法满足需求,最后还是静下心来自己写一个,代码很简单,就是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结束标示
});
笔记
·
CSS input 设置宽高margin及padding对齐
input经常无法与其他元素对齐,通常用外层来包裹input,设置外层样式CSS,如依旧无法达到理想的效果,只能将input块级元素化
1、给input添加CSS属性:display:block
添加display将元素显示为块级元素,前后会带有换行符,用float来排列input
2、给input添加CSS属性:display:inline-block
将元素显示为行内块元素,上下对齐用CSS:vertical-align: bottom; 底部对齐
笔记
·
WordPress文章上传图片剪裁设置
WordPress上传图片,默认会有多个剪裁图片,事实上很多图片是用不到的,可以在后台设置减少剪裁
仪表盘->setting->媒体
设置略缩图尺寸,详细设置这个就已经够用了。
中等尺寸和大尺寸可以设置为0,0表示不剪裁,设置好之后,上传图片就只有两个选择了,略缩图和原始尺寸
空间上也就只有两种图片,一种是略缩图,一种是原始尺寸的图片,可以减少不少空间!
笔记
·
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中设置略缩图
笔记
·
wordpress 输入友情链接wp_list_bookmarks
WordPress输出友情链接
1、后台添加“链接”导航
在function.php中加入
add_filter('pre_option_link_manager_enabled','__return_true');
2、前台调用友情链接列表
<?php wp_list_bookmarks( $args ); ?>
示例:
<?php wp_list_bookmarks('orderby=id&categorize=0&show_images=0&title_li='); ?>
参数说明:
<?php
$args = array(
'orderby' => 'name',
'order' => 'ASC',
'limit' => -1,
'category' => ' ',
'exclude_category' => ' ',
'category_name' => ' ',
'hide_invisible' => 1,
'show_updated' => 0,
'echo' => 1,
'categorize' => 1,
'title_li' => __('Bookmarks'),
'title_before' => '<h2>',
'title_after' => '</h2>',
'category_orderby' => 'name',
'category_order' => 'ASC',
'class' => 'linkcat',
'category_before' => '<li id=%id class=%class>',
'category_after' => '</li>' );
?>
wp_list_bookmarks()参数详解
categorize
(布尔型)是否所有链接都应该显示在相应的分类目录下。
1 (true)——默认值
0(false)
category
(字符串)将要显示的链接分类目录的ID,用逗号隔开。如果没有指定分类,显示所有含有链接的链接分类。
exclude_category
(字符串)将被排除的链接分类目录的ID,用逗号隔开。默认值为 (no categories excluded)(不排除任何链接分类)。
category_name
(字符串)将要显示的链接所属分类的名称。如果没有指定分类,显示所有含有链接的链接分类。默认值为 (all Categories)(所有链接)。
category_before
(字符串)放置在每个链接分类目录前的文本。默认值为'<li id=”[category id]” class=”linkcat”>’。
category_after
(字符串)放置在链接分类目录后的文本。默认值为'<‘/li>’。
class
(字符串)链接分类列表所在类。默认值为’linkcat’。
category_orderby
(字符串)用以排列链接分类的值。有效值包括:
‘name’ ——默认值
‘id’
‘slug’
‘count’
category_order
(字符串)排列的顺序,以升序或降序排列category_orderby参数值。有效值包括:
ASC ——默认值
DESC
title_li
(字符串)链接列表的标题。默认值为 ‘__(‘Bookmarks’)’,显示标题为“Bookmarks”(the_(‘ ‘)用于本地化。)只有将categorize设为0(false)时,才可使用该参数(否则将使用分类名称)。若将title_li设为空(0),则不显示列表标题,且链接列表不会被 <ul>, </ul>标签围绕(要确保将categorize选项设为0,以使title_li生效)。
title_before
(字符串)’categorize’值为1(true)时显示在每个链接类别前的文本,或’categorize’值为0(false)时在’title_li’中定义的文本。 默认值为'<h2>’。
title_after
‘categorize’值为1(true)时显示在每个链接类别后的文本,或’categorize’值为0(false)时在’title_li’中定义的文本。 默认值为'</h2>’。
show_private
(布尔型)是否应显示某个链接分类(即使该分类被认为是私密的)。忽略管理面板的设置,显示私密链接分类(TRUE),或者不显示私密链接分类(FALSE)。
1 (true)
0(false)——默认值
include
(字符串)在结果中包含的数值型链接ID列表,各ID用逗号隔开。例如, ‘include=1,3,6’ 表示返回或响应ID为1、3、6的链接。如果使用include字符串,那么 category、category_name、exclude参数将被忽略。默认值为 (all Bookmarks)(所有链接)。
exclude
(字符串)将要被排除的链接的ID,各ID用逗号隔开。如 ‘exclude=4,12’表示不返回ID为4和12的链接。默认值为 (exclude nothing)(不排除任何链接)。
orderby
(字符串)以何顺序为链接排序。这可能是一份各个值的列表,各值由逗号隔开。默认值为’name’,除非你传递’ ‘(空)值给该参数,此时参数值为’id’。有效值包括:
‘id’ (WP 3.2 及以后版本使用 ‘link_id’ )
‘url’
‘name’ ——默认值
‘target’
‘description’
‘owner’ —— 通过连接管理器添加链接的用户
‘rating’
‘updated’
‘rel’ —— 链接关系(XFN)
‘notes’
‘rss’
‘length’ —— 链接名称的长度,范围从最短的名称到最长的名称
‘rand’ —— 以任意顺序显示链接
order
(字符串)根据’orderby’参数中的设置为分类目录排序(升序或降序)。有效值包括:
ASC ——默认值
DESC
limit
(整数)可以显示的最大链接数。默认值为-1(所有链接)。
before
(字符串)放置在链接前的文本。默认值为'<li>’。
after
(字符串)放置在链接后的文本。默认值为'</li>’。
link_before
(字符串)超链接代码中链接文本前的文字。无默认值。
link_after
(字符串)超链接代码中链接文本后的文字。无默认值。
between
(字符串)链接/图片与其说明之间的文本。默认值为’n’(换行)。
show_images
(布尔型)是(TRUE)否(FALSE)显示链接的图片
1 (true)——默认值
0(false)
show_description
(布尔型)是(TRUE)否(FALSE)显示链接说明。该参数用于show_images为FALSE时或未定义链接图片时。
1 (true)
0(false)——默认值
show_name
(布尔型)显示链接文本(TRUE)。该参数用于show_images为TRUE时。
1 (true)
0(false)——默认值
show_rating
(字符串)是(TRUE)否(FALSE)显示链接的级别。
1 (true)
0(false)——默认值
show_updated
(布尔型)是(TRUE)否(FALSE)显示最近更新的时间标记。
1 (true)
0(false)——默认值
hide_invisible
(布尔型)是否显示公开度为“不公开”的链接。是(TRUE)否(FALSE)遵循管理面板中的设置。
1 (true)——默认值
0(false)
echo
(布尔型)显示结果(TRUE),或将结果保留以供PHP使用(FALSE)。
1 (true)——默认值
0(false)
笔记
·
百度网盘的下载速度真心慢
记得曾经一直使用QQ收藏夹来移动文件包,自从有了百度网盘,就开始使用百度网盘,老实说,百度网盘的下载速度真心慢!
每次都要花几分钟时间来下载,虽然上传速度好像不算慢,是时候体验下腾讯微盘!
随笔
·
JQ鼠标悬停逐行向上滚动
JQ逐行向上滚动,适合滚动公告、滚动新闻、滚动…等
JQ:
function autoScroll(obj) {
$(obj).find("ul").animate({
marginTop: "-20px"
}, 500, function() {
$(this).css({
marginTop: "0px"
}).find("li:first").appendTo(this);
})
}
$(function() {
var myar = setInterval('autoScroll(".uptext")', 2000);
$(".uptext").hover(function () { clearInterval(myar); },
function () {myar = setInterval('autoScroll(".uptext")', 2000) });
})
HTML:
<span class="uptext">
<a>标题</a>
<a>标题</a>
</span>
CSS:
.uptext{height:20px;overflow:hidden;}
以上需引入JQ库
笔记
·
博客启用SSL安全连接https
之前一直觉得HTTPS挺难折腾的,加上以前的SSL证书申请也不容易,随着苹果应用需要SSL,小程序也需要SSL,谷歌浏览器也对http链接提示非安全,SSL似乎已经普遍化了,免费的SSL证书也变得越来越多了。
虽然服务器,域名,都在阿里云,但是阿里云的SSL证书,一个域名最多只能申请3个,如子域名不多,可以申请阿里的SSL证书。我倒是觉得腾讯云挺接地气的,一个主域可以申请最多20张SSL证书。
证书的安装,现在大多服务器可视化控制面板也都带有一键部署的。HTTPS终究已经成为了普及化了!
随笔
·
电影无问西东1080百度云下载
《无问西东》是由上海腾讯企鹅影视文化传播有限公司、中国电影股份有限公司、北京太合娱乐文化发展股份有限公司联合出品,由李芳芳自编自导,章子怡、黄晓明、张震、王力宏、陈楚生、铁政领衔主演的剧情片,于2018年1月12日在中国内地上映。
影片讲述了四个不同时代却同样出自清华大学的年轻人,对青春满怀期待,也因为时代变革在矛盾与挣扎中一路前行,最终找寻到真实自我的故事
1080无问西东百度云下载
下载链接:百度云下载(已和谐,将调至RAR下载链接)
RAR下载:RAR下载(密码:64sv,RAR解压密码:123456,和谐号下载rar文件自行解压)
电影
·
淘宝88会员APP内每月免费兑换一个月优酷会员
淘宝,支付宝经常有免费兑换优酷会员,虽然优酷很少用,至少需要时,可以兑换使用,另外,确认收货评价是也有机会开出优酷会员VIP卡,积分,习惯网购的应该都会有不少吧!
已兑换两次,另外,天猫积分兑换的天猫无门槛优惠券,退货时,优惠券会显示过期,思来想去,还是留着兑换优酷VIP会员吧!
登陆优酷,使用淘宝账号登陆!
优酷APP下载(领红包链接,无线端链接):领优酷红包
免费
·
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 . '
ID . ‘”‘ . $value . $class_names .’>’;
$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 .= ‘<a ‘. $attributes .’>’;
$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是不一样的!
JOS京东联盟API接口调用
突然突然突然,觉得做一个京东联盟API调用,也许,在微信QQ等场景是不会有被屏蔽的现象。
于是于是于是,就去研究了下京东联盟API,看着一堆接口,描述的确挺不错的,实际返回内容,可能不是你想的那样。。。
另外另外另外,京东联盟的API调用是需要一个token授权的,而且,这个token授权还需要登陆京东账户的,好在这个token的有效期是1年,在1年内,登陆一次就好!据说,修改过京东账户密码,是需要重新获取一次的!
好吧好吧好吧,那就来获取token授权码,想获取token,先得获取code,通过code,再获取token!
先看下官方说明:
再看下获取授权码的API请求链接:
https://oauth.jd.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&
redirect_uri=YOUR_REGISTERED_REDIRECT_URI&state=YOUR_CUSTOM_CODE
对着参数列表,链接是这样的!
https://oauth.jd.com/oauth/authorize?response_type=code&client_id=你的Appkey&
redirect_uri=你的回调URL&state=随意写
改好后,复制黏贴到浏览器打开,就是一个授权登陆,登陆之后自动跳转到回调地址,参数中带有code值!
通过code值获取token,获取token值请求地址:
https://oauth.jd.com/oauth/token?grant_type=authorization_code&client_id=你的Appkey&
redirect_uri=你的回调URL&code=刚刚获取的code&state=随意写&client_secret= 你的appSecret
复制到浏览器打开,就可以获得需要的token。
另外,有一个叫做Refresh token的刷新token来延迟Access token的时效,也就是,如果获取一次,可以在有效期内延长时间,比如计划!
获取了Access token之后,就可以使用API接口了!
最后,只想说,京东联盟的API,始终没有阿里妈妈API来的方便!
参考官方文档://jos.jd.com/doc/channel.htm?id=152
代码
·
WordPress博客模板LFblog大致完成
原本计划一周完成的一个模板,陆陆续续的花了好几个星期的时间,算是第一次写的博客主题,没有亮点,只是平凡简单的自用博客主题
顺便写了一个无线端CSS,通过PHP判断是否为无线,无线时调用无线CSS,感觉字体设置的太小了
主题后台有个简单的设置项。自用还算习惯!
博客启用新模板LFblog1.0
新模板大致写好,目前就只有PC端,无法自适应,先修改优化下细节,接下来再写一个无线端的CSS。
模板没有特别功能,只是一个简单的博客主题,只是集成fancybox和高亮代码。剩下的就只是一个CSS的样式优化
有几个广告位,感觉是影响了整体视觉!
剩下的再继续想到什么就修改一下什么,也算是真正意义上的一个自主WordPress博客主题了,不知如何起名,就起LFblog吧!
随笔
·
宝塔Linux无法安装32位问题
宝塔Linux无法安装32位问题,记录一下:
vi install.sh,删除以下代码
if [ "$is64bit" = '32' ];then
echo '=================================================';
echo -e "\033[31m BT-Panel Incompatible 32 bit OS. \033[0m";
exit;
fi
:wq,保存退出,重新运行sh install.sh,即可安装
编程
·
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主题的布局
Zero零分
站龄15年资深站长
一个喜欢折腾,却又折腾不出像样东西的,不会PHP的PHP程序员!
476
文章 26
评论 27
分类 839
标签 7
友链
文章 26
评论 27
分类 839
标签 7
友链
百度广告
最近更新
- 01 微信小程序scroll-view下拉刷新,出现一直刷新
- 02 微信小程序scroll-view禁止滚动条
- 03 微信小程序开发新版本检测、网络请求、json格式判断封装
- 04 利用Fiddler抓包工具下载微信视频号视频
- 05 整理了一张吴宗宪专辑无损CD《无尽的爱》APE格式音频
- 06 百度AI语音演示接口后获取的音频流处理
- 07 Win7 安装pr2018(AdobePremiereCC2018)记录说明
- 08 win7无法查看gif动画图解决插件Image_Viewer_for_Windows_7
- 09 win7 视频无法预览图片(文件夹内不显示略缩图)
- 10 微信小程序解决上滑多次加载重复内容的问题
热门推荐
最新评论
标签云
微信小程序
小程序开发
视频下载
Fiddler
微信视频号
无损CD
无尽的爱
吴宗宪
文字转语音
百度ai
pr2018
win7
Image Viewer for Windows 7
win7查看GIF
视频预览图片
视频略缩图
视频解码器
fireworks
水星
移动热点
ps ico
ps插件
foreach
php
保存远程图片
登录过期
phpmyadmin
扩展屏
多显示器
自动登陆
netplwiz
CSS动画
wordpress图片
sitemap
无线端
调试
a标签
P标签
calc
justify
pycharm
Python
相邻文章
logo
赵薇
html
win11
Windows
扫黑风暴
我的饭店
淘花
游艇
港姐
周星驰
unisoc
荣耀paly5
信用卡
AI机器人
华智冰
小冰