开启woocommerce的用户注册功能

阅读(7)

wordpress有个商城插件——woocommerce,我们都知道wordpress有用户注册登录的,可是我们在折腾wooocommerce的时候,通常是进去买东西,直到走到checkout页面那里才出现用户填写信息,然后结算,在这里用户才能接触到用户注册的机会。

笔者在对一个基于wordpress的商城网站做了一些处理,比如只有登录的用户才能看到价格,才能加入购物车,才能进入到结算页面,因此,如果没有账户的用户。是没有机会看到价格的,如果没有供用户注册的地方,估计用户永远也买不到东西,什么鬼?都什么时候了,买个东西为啥这么艰难。起码给用户一个注册的机会。没有开启的情况是这样的。

正确的做法如下:

1.woocommerce是有开启用户注册登录的地方的,只是我们安装这个插件后,默认是没有开启的,直接去后台开启即可。

2.来到woocommerce的settings那里,然后找到Accounts那个栏目,勾选启用注册功能,如下图:

3.我们再次来到用户账户登录页面。

最后,用户就可以先登录在查看价格了,如果没有账号就可以当场进行注册,注册完毕直接登录即可。

 

锚点链接点击缓慢移动到目标位置

阅读(9)

锚点链接点击缓慢移动到目标位置,而不是直接瞬间跳转到目标地址,这样提样不是很好,期待的样子应该是点击锚点链接后,有个稍微缓慢的移动过程,如何实现呢?

方案:采用jquery

demo:

<!DOCTYPE> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js平滑滚动到顶部、底部、指定地方</title> 
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script> 
<style> 
.box{ height:200px; width:100%; background:#ccc; margin:10px 0;} 
.location{ position:fixed; right:0; bottom:10px; width:20px; background:#FFC; padding:5px; cursor:pointer;color:#003}; 
</style> 
</head> 
<body> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box a">产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box bottom"></div> 
<div class="location"> 
<p class="scroll_top">返回顶部</p> 
<p class="scroll_a">产品介绍</p> 
<p class="scroll_bottom">滑到底部</p> 
</div> 
<script type="text/javascript"> 
jQuery(document).ready(function($){ 
$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 
$('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);}); 
$('.scroll_bottom').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, 800);}); 
}); 
</script> 
</body> 
</html>

[转]php中的->和=>的用法和说明

阅读(16)

在学习PHP中,遇到了->和=>这两个符号。

刚遇到这两个符号的时候不知道它们代表的含义,在经过百度后才发这两个符号的秘密。

下面来看一下在PHP中->的秘密,如下代码。

<?php
class Car {
public $speed = 0;
//增加speedUp方法,使speed加10
public function speedUp(){
$this->speed+=10;
}

}
$car = new Car();
echo $car->speed;
$car->speedUp();
echo "<br>";
echo $car->speed;

?>

在这个里面,我们可以看到在类里面定义了一个speedUp的方法,在此方法中可以看到$this->speed+=10,这行代码。->代表什么呢?

在经过百度后,我自己认为他代表的是汉字中“的”这个字的含义,比如这行代码,翻译过来就是$this的speed等于speed加10。当然这只代表本人的观点,如果有错请多指教。

接下来就是=>了,简单来说就是=>符号来分隔键和值,左侧表示键,右侧表示值。来看段代码吧。

<?php
//从数组变量$arr中,读取键为apple的值
$arr = array('apple'=>"苹果",'banana'=>"香蕉",'pineapple'=>"菠萝");
$arr0 = $arr["apple"];
if(isset($arr0)) {
print_r($arr0);
}
?>

在此代码中,先声明一个arr数组,然后声明一个arr0等于苹果的键,接下来用IF来判断他是否存在,如果存在则输出数组中,此键右侧的值。

简单来说就是给别人起一个外号,用外号来代表某个人,提起他的外号,就可以知道他是谁的意思。

本文转自:https://blog.csdn.net/qq_38275944/article/details/75576963

img 的data-src 属性实现懒加载

阅读(28)

一、什么是图片懒加载?

当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),当图片出现在浏览器的可视区域内时,才设置图片真正的路径,让图片显示出来。这就是图片懒加载。

通俗一点:
1、就是创建一个自定义属性data-src存放真正需要显示的图片路径,而img自带的src放一张大小为1 * 1px的图片路径
2、当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-src的值赋给src。
ps:自定义属性可以取任何名字

二、需要了解的问题

1、如何加载图片?
2、如何判断一个元素出现在视野中?

如何加载图片?
只需要把data-src中的地址放到src的里面就好了。

代码:

function loadImg($img){
//.attr(值)
//.attr(属性名称,值)
$img.attr('src', $img.attr('data-src')) //把data-src的值 赋值给src
$img.attr('data-isLoaded', 1) //已加载过的图片做标记
}

废话少说,直接上demo:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
.container {
max-width: 900px;
margin: 0 auto;
display: block;
}
.container:after {
content: '';
display: block;
clear: both;
}
h1 {
clear: both;
}
</style>
</head>

<body>
<div class="container">
<img src="img/loading.gif" alt="1" data-src="img/g1.jpg">
<img src="img/loading.gif" alt="2" data-src="img/g2.jpg">
<img src="img/loading.gif" alt="3" data-src="img/g3.jpg">
<h1>你好</h1>
</div>
<script>
start();
$(window).on('scroll', function() {
start();
})

function start() {
//.not('[data-isLoaded]')选中已加载的图片不需要重新加载
$('.container img').not('[data-isLoaded]').each(function() {
var $node = $(this);
if (isShow($node)) {
loadImg($node);
}
})
}

//判断一个元素是不是出现在窗口(视野)
function isShow($node) {
return $node.offset().top <= $(window).height() + $(window).scrollTop();
}
//加载图片
function loadImg($img) {
//.attr(值)
//.attr(属性名称,值)
$img.attr('src', $img.attr('data-src')); //把data-src的值 赋值给src
$img.attr('data-isLoaded', 1); //已加载的图片做标记
}
</script>
</body>

</html>

说明一下:

当我们打这个demo的时候,看到的是第一张图片,这个在打开第一张图片的时候,利用开发者工具我们可以看到如下截图:

null;

这个就说明当视口显示第一张图片的时候,第二张和第三张还没出现,那么就保持loading.gif,这样就节省了加载的时间,当我们继续往下滑直到出现第二张图片的时候,此时第三张图片还没出现在视口,我们通过开发者工具看到如下的截图:

当然,我们继续滑动到下面,看到第三张图片的时候,自然而然第三张的loading.gif也会被g3.jpg取代,这样就实现了懒加载,滑动到那个位置才加载,这篇文章参考了这个作者:https://www.cnblogs.com/moxiaowohuwei/p/7908877.html

php搜索数据库数据的时候不显示第一条记录

阅读(21)

我的问题是这样的,在做一个信息系统的时候,需要一个查询的东西,就做了一个测试一下,选择其中一个分类查询,就是想多查几条数据出来,后来发现在数据表中本来有5条数据的,可是查询总是4条数据,而且是第一条数据记录没有,我的代码如下:

<?php
$cid = $_POST['cid'];
$sql = "select * from classify where cid='$cid'";
$query = mysql_query($sql);
$row = mysql_fetch_array($query);
while($row=mysql_fetch_array($query)){
echo "<table><tr><td>".$row['title']."</td></tr></table>";
}
?> 

这样写的时候,会查询出一些记录,可是第一条是没有的,百思不得其解,后来在百度上找到了答案,方法如下

<?php
$cid = $_POST['cid'];
$sql = "select * from classify where cid='$cid'";
$query = mysql_query($sql);
//$row = mysql_fetch_array($query);
while($row=mysql_fetch_array($query)){
  echo "<table><tr><td>".$row['title']."</td></tr></table>";
}
?>

这样就行了,因为上面注释掉的那行已经把第一行给取出来了,说到底还是php的基本功力不行。

网友经典补充:

mysql_fetch_array()函数,作用是从mysql数据源中取得一行作为关联数组、数字数组或者两者兼有,要注意的是,这个函数每运行一次,数据库指针会往下移动一行
你第一次就已经下移一行了,那你下面的循环,当然的从第二行还是,那当然不会返回第一行
其实,你那条(刚才被注释的那条)写在哪里都是画蛇添足,毫无意义的代码!

linux(ubuntu)上安装nodejs和npm报错的解决方案

阅读(60)

虽然在linux上安装这些软件和环境应该是很方便的是,可是不知道什么原因,我这边安装一直报错,试了所有的方法,均以失败而告终,足足花了半天,这可以说是很浪费生命的。这里做个记录,希望大家能够有所受益。

网上的做法通常是这样的

先更新ubuntu软件源:

sudo apt-get update 
sudo apt-get install -y python-software-properties software-properties-common 
sudo add-apt-repository ppa:chris-lea/node.js 
sudo apt-get update
1、先在系统上安装好nodejs和npm
sudo apt-get install nodejs
sudo apt-get install nodejs-legacy
sudo apt-get install npm
2、升级npm为最新版本
sudo npm install npm@latest -g
3、安装用于安装nodejs的模块n
sudo npm install -g n
4、通过n模块安装指定的nodejs
sudo n latest
sudo n stable
sudo n lts
5、查看版本
sudo node -v
sudo npm -v

一般这样的话,都是没有什么问题的。可是我这边安装nodejs是没有问题的,可是一直卡在安装npm这里。提示报错:npm命令就会提示没有该命令。


笔者是先彻底卸载掉nodejs,以及npm的东西,运行如下命令:

sudo apt-get remove npm
sudo apt-get remove nodejs-legacy
sudo apt-get remove nodejs 
sudo rm /usr/bin/node   //如果添加了软链接到这个目录下的话,要把这里快捷方式删除

确保删除干净后,我们采用这种方法安装:

安装

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

使用

安装成功后,需要关闭xshell,重新启动。nvm才会生效。

使用command -v nvm查看nvm是否安装成功

root@linuxidc:~# command -v nvm
nvm

查看已安装

通过nvm ls查看已安装的版本

$ nvm ls
            N/A
node -> stable (-> N/A) (default)
iojs -> N/A (default)

查看有哪些可安装

通过nvm ls-remote查看可使用版本

$ nvm ls-remote
        v0.1.14
        v0.1.15
        v0.1.16
        v0.1.17
        v0.1.18
...
        v10.6.0
        v10.7.0
        v10.8.0

安装nodejs

跟据这个列表,我们找到自己喜欢的版本,笔者这里选择最后一个:v10.8.0

通过nvm install 10.8.0来安装nodejs,后面的版本号我们可以任意选择

root@linuxidc:~# nvm install 10.8.0
Downloading and installing node v6.2.0...
Downloading https://nodejs.org/dist/v10.8.0/node-v10.8.0-linux-x64.tar.xz...

我们上面使用的是国外的服务器下载,很慢,耐心等待,nodejs和nvm成功安装!

我们运行下面的命令来确定是否已经安装好:nodejs和npm

node -v
npm -v

我们已经看到了相应的版本号了,这个时候我们看到有这样一个提示:

npm update check failed │
│ Try running with sudo or get access │
│ to the local update config store via │
│ sudo chown -R $USER:$(id -gn $USER) /home/wkp/.config

这句话的大概意思就是npm更新检查失败,还告诉了我们更新的方法,我们运行如下命令:

sudo chown -R 用户名(wkp) /home/wkp/.config
命令如下:
sudo chown -R wkp /home/wkp/.config

这个时候就不会报错了。

其实呢,笔者本来是要解决安装hexo这个东西,而这个东西又是依赖nodejs的,所以才有了这么多的问题。好的,我们继续安装hexo,运行命令:

sudo npm install hexo-cli -g

可是报错了:sudo: npm :找不到命令。后来去掉sudo,再次运行:

npm install hexo-cli -g

就不会报错了,然后我们接着继续往下走:

hexo init blog
cd blog
npm install
hexo server

基本没有什么问题了。

PHP获取文件扩展名的方法

阅读(33)

本文实例讲述了PHP获取文件扩展名的方法。分享给大家供大家参考,具体如下:

<?php
$filename="123.jpg";

//方法一:
function get_ext($file_name){
  return array_pop(explode('.', $file_name));
  //用.号对字符串进行分组
}
echo get_ext($filename);

//方法二:
$fileEx=strtolower(substr(strrchr($filename,"."),1));
echo $fileEx;

//方法三:
$extend=pathinfo($filename);
echo $extend['extension'];

//方法四:
$filetype=array("image/gif","image/jpeg");
//判断文件扩展名类型是否在该 数组中
if(in_array($_FILES['file']['type'],$filetype)){
//针对上传文件判断
  echo $_FILES['file']['type'];
}
?>