欢迎光临
请一秒记住我们的网址:www.xinfangs.com !

Wordpress教程-为WordPress添加网站内容复制版权提示

时间煮雨阅读(778)

在许多网站中,我们会发现如果复制器内容的话,会弹出一个窗口提示转载注明出处,这样就不会有人随意转载,今天就介绍下如何使用一段代码为Wordpress添加复制弹窗提示


首先将如下的代码中copyNoticeString的文字提示修改为自己的提示语:

function copyNotice(){ 
var copyNoticeString = "复制成功,若要转载请务必保留原文链接,谢谢合作!——廖为祥博客"
if(navigator.userAgent.indexOf("MSIE")>0) { 
art.dialog.alert(copyNoticeString); 
} else { 
alert(copyNoticeString); 
}
}
document.body.oncopy=function(){
copyNotice();
}

将其放到wordpress主题目录下的functions.php文件中,可以使用子主题


或者如果主题有代码功能的话,加入到主题代码中也可以,只要是全局的就行

保存后刷新网页再次复制就会弹出提示,无论是右键,还是Ctrl + C都会触发

Wordpress开发教程-纯代码实现WordPress文章分页显示

时间煮雨阅读(1588)


在制作WordPress主题模板时,我们会用到循环输出文章列表,文章列表太多就会有分页的问题,下面是一种分页方法,十分好用,可以设定页数范围。

function get_pagenavi( $range = 4 ) {
	global $paged,$wp_query;
	if ( !$max_page ) {
		$max_page = $wp_query->max_num_pages;
	}
	if( $max_page >1 ) {
		if( !$paged ) {
			$paged = 1;
		}
		echo "<li>";
		previous_posts_link('上一页');
		echo"</li>";
		if ( $max_page >$range ) {
			if( $paged <$range ) {
				for ( $i = 1; $i <= ($range +1); $i++ ) {
					echo "<li><a href='".get_pagenum_link($i) ."'";
					if($i==$paged) echo " class='current'";
					echo ">$i</a></li>";
				}
			} elseif($paged >= ($max_page -ceil(($range/2)))) {
				for ($i = $max_page -$range;$i <= $max_page;$i++) {
					echo "<li><a href='".get_pagenum_link($i) ."'";
					if($i==$paged)echo " class='current'";
					echo ">$i</a></li>";
				}
			} elseif($paged >= $range &&$paged <($max_page -ceil(($range/2)))) {
				for ($i = ($paged -ceil($range/2));$i <= ($paged +ceil(($range/2)));$i++) {
					echo "<li><a href='".get_pagenum_link($i) ."'";
					if($i==$paged) echo " class='current'";
					echo ">$i</a></li>";
				}
			}
		} else {
			for ($i = 1;$i <= $max_page;$i++) {
				echo "<li><a href='".get_pagenum_link($i) ."'";
				if($i==$paged)echo " class='current'";
				echo ">$i</a></li>";
			}
		}
		echo "<li>";
		next_posts_link('下一页');
		echo"</li>";
		echo '<li><span>共'.$max_page.'页</span></li>';
	}
}

将上面的代码放在主题目录下的function.php中,在你需要的地方使用下面的代码调用:

<div class="pagination"> <ul> <?php get_pagenavi();?> </ul> </div>

给 DUX 主题的网站统计小工具添加今日注册数和阅读总数统计

时间煮雨阅读(1808)


WordPress DUX主题的小工具有个叫网站统计,默认包含以下功能,并可以自主选择显示哪几项数据:

可以自主选择是否显示 WordPress 整个站点的日志总数、评论总数、标签总数、页面总数、分类总数、链接总数、用户总数、最后更新;后面的三个(红框款选)今日注册、阅读总数、点赞总数是后面加上去的。小伙伴们可以用电脑去前端,右侧侧栏查看效果。

修改方式

打开/wp-content/themes/dux/widgets/widget-statistics.php文件,找到:
echo '</ul>';

在其上方添加:

		if( isset($instance['registnum']) ){
			 $todate = date("Y-m-d");
			 $sql = "SELECT COUNT(*) AS num FROM `wp_users` WHERE SUBSTRING(`user_registered`,1,10)='" . $todate . "'";
			 $results = $wpdb->get_results($sql);
			echo '<li><strong>今日注册:</strong>'.$results[0]->num.'</li>';
		}

		if( isset($instance['views']) ){
			$sql = "SELECT SUM(`meta_value`) as num FROM `wp_postmeta` WHERE `meta_key`='views'";
			$results = $wpdb->get_results($sql);
			echo '<li><strong>阅读总数:</strong>'.$results[0]->num.'</li>';
		}
		if( isset($instance['like']) ){
			$sql = "SELECT SUM(`meta_value`) as num FROM `wp_postmeta` WHERE `meta_key`='like'";
			$results = $wpdb->get_results($sql);
			echo '<li><strong>点赞总数:</strong>'.$results[0]->num.'</li>';
		}
再在<?php上方添加:
		<p>
			<label>
				<input style="vertical-align:-3px;margin-right:4px;" class="checkbox" type="checkbox" <?php checked( $instance['registnum'], 'on' ); ?> id="<?php echo $this->get_field_id('registnum'); ?>" name="<?php echo $this->get_field_name('registnum'); ?>">显示今日注册
			</label>
		</p>
		<p>
			<label>
				<input style="vertical-align:-3px;margin-right:4px;" class="checkbox" type="checkbox" <?php checked( $instance['views'], 'on' ); ?> id="<?php echo $this->get_field_id('views'); ?>" name="<?php echo $this->get_field_name('views'); ?>">显示阅读总数
			</label>
		</p>
		<p>
			<label>
				<input style="vertical-align:-3px;margin-right:4px;" class="checkbox" type="checkbox" <?php checked( $instance['like'], 'on' ); ?> id="<?php echo $this->get_field_id('like'); ?>" name="<?php echo $this->get_field_name('like'); ?>">显示点赞总数
			</label>
		</p>
保存刷新即可。

为你的WordPress博客添加对联特效,并跟随屏幕移动

时间煮雨阅读(1506)

前几天在网上找了可以为网站添加灯笼效果的插件,今天突然其想,看能不能在网上找到可以为网站两侧添加对联的,果然一搜还真搜出来了,
这是缙哥哥为了年前营造缙哥哥的博客新年氛围,给博客添加新年对联的文章,网也在网站上测试了,可以用的。

直接上实操:

首先根据自己的主题、意向定制好自己的对联图片,并获取图片地址,这里建议使用//,避免 HTTP 和 HTTPS 之间转换的麻烦。
将跟随对联代码放置主题根目录 footer.php 中的 代码之前,

代码如下:

<SCRIPT language="JavaScript">
lastScrollY = 0;
function heartBeat(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop
else
{/*Netscape stuff*/}
//alert(diffY);
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("leftDiv").style.top = parseInt(document.getElementById("leftDiv").style.top)+percent+"px";
document.getElementById("rightDiv").style.top = parseInt(document.getElementById("rightDiv").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
//alert(lastScrollY);
}
//下面这段删除后,对联将不跟随屏幕而移动。
window.setInterval("heartBeat()",1);
//-->
//关闭按钮
function close_left2(){
 left2.style.visibility='hidden';
}
function close_right2(){
 right2.style.visibility='hidden';
}
//显示样式
document.writeln("<style type=\"text\/css\">");
document.writeln("#leftDiv,#rightDiv{position:absolute;}");
document.writeln(".itemFloat{width:100px;height:auto;line-height:5px}");
document.writeln("<\/style>");
//以下为主要内容
document.writeln("<div id=\"leftDiv\" style=\"top:112px;left:50px\">");
//------左侧各块开始
//---L2
document.writeln("<div id=\"left2\" class=\"itemFloat\">");
document.writeln("<img border=0 src=//www.dujin.org/images/duilianz.jpg>");
document.writeln("<br><a href=\"javascript:close_left2();\" title=\"关闭上面的广告\">×<\/a>");
document.writeln("<\/div>");
//------左侧各块结束
document.writeln("<\/div>");
document.writeln("<div id=\"rightDiv\" style=\"top:112px;right:50px\">");
//------右侧各块结束
//---R2
document.writeln("<div id=\"right2\" class=\"itemFloat\">");
document.writeln("<img border=0 src=//www.dujin.org/images/duiliany.jpg>");
document.writeln("<br><a href=\"javascript:close_right2();\" title=\"关闭上面的广告\">×<\/a>");
document.writeln("<\/div>");
//------右侧各块结束
document.writeln("<\/div>");
</SCRIPT>

然后,将图片地址替换成自己的对联图片。为了更好的去适应访客效果,缙哥哥计划在低于1500分辨率(包括手机端)的终端设备上不显示对联特效,所以,加入了一下css样式。

@media (max-width:1500px){#leftDiv,#rightDiv{display:none !important}}

代码中的 max-width 值1500可根据自己的需要而设定,比如很多笔记本电脑的分辨率是1440,显示了就会影响两旁的内容展示,毕竟每次要去关闭两张图片会很烦,而且你放在 footer.php 里面可是每个页面都有的。至于对联的各种特效,如跟随屏幕而移动、是否显示关闭按钮等都已经写在代码里面,大家可以自行修改。

WordPress 开发者利器:GenerateWP WordPress代码生成器

时间煮雨阅读(1712)

在开发 WordPress 主题的时候,有很多比较常用的功能,例如边栏、自定义菜单、自定义文章类型等等。这些功能代码,通常都是使用对应函数添加上对应参数实现的,虽然复制然后增删一些参数就已经足够方便了,但是还是有一些更懒的人专门做了一些工具来生成这些代码。


Generate WP 就是这样一个工具网站,上面提供了12种常用功能的代码生成工具,甚至还可以生成查询代码,只需要点击对应的工具然后按照表单填写,最后点击生成即可生成一段功能代码,复制到主题对应位置就可以了。

GenerateWP 的好处是把繁琐的记忆工作简化了。

请一秒记住我们的网址:www.xinfangs.com !

去投稿去留言