标签: wordpress - 算法花园

2017-07-222024-07-21 2 分钟读完 (大约341个字)

使用 BackWPup 恢复 WordPress

昨天晚上手贱点了升级服务器上的 Ubuntu 版本,然后发现 WordPress 不能用了…删了nginx装上 Apache 才解决,之后发现主题有问题,一激动就提交工单把服务器重装了…

接下来就是 WordPress 重装的过程,自己一直使用BackWPup 每周备份 WordPress ,所以本以为重装会很轻松.

早上起来将 WordPress 以及 BackWPup 装好.然后就在 BackWPup 里面翻了好久都没有发现怎么还原的按钮…又用百度谷歌搜了一下,也没有教程…

没有办法,只好硬着头皮去看插件的官网,找到 How to restore a WordPress backup? – BackWPup Docs,按照这篇文章的提示成功恢复 WordPress.

恢复数据库

由于我用的是phpmyadmin,所以登录到服务器的phpmyadmin管理页面.选择数据库 WordPress,点击导入,上传BackWPup备份压缩文件中的.sql文件,点击执行,这样数据库中的内容就还原了.

-w1277

恢复 WordPress文件

这一步只需要将备份文件里面的文件上传到服务器新的网站目录下覆盖就可以了.由于我用的是iTerm2,所以可以在本地使用scp命令

尾声

zz插件,连个一键还原都没有…

wordpress, backwpup

2017-02-112024-07-21 程序园 4 分钟读完 (大约583个字)

为博客添加返回顶部按钮

适用于WordPress

由于主题没有自带的返回顶部按钮，所以我一直在寻找一种解决方案。之前使用的是wordpress插件提供的返回顶部按钮，后来在网上乱逛，发现有Xnces – 衔铁部落的返回顶部按钮非常的酷炫，正是我要寻找的。于是，我在那个博客下留言询问制作方法。
前几天，看到那个博客上出现了一篇文章-本博客的返回顶部效果。
按照上面的方法，折腾一会儿，我也制作出来了，特地记录一下。

首先，先加载一下环境。在后台functions.php中找到ms_scripts()函数，添加wp_enqueue_script( 'jquery' );调用wordpress默认的JQuery文件。
我将这个效果有关的js代码放在了主题目录下新建的themes.js文件中。所以在上面的函数中添加下面两句话导入这个文件wp_register_script( 'themes_js', THEMEPATH . '/themes.js',array());和wp_enqueue_script( 'themes_js' );
CSS代码我直接加在了主题style.css中。
重新打开网站就能看到效果了。

themes.js文件中代码如下

var bigfa_scroll = {
    drawCircle: function(id, percentage, color) {
        var width = jQuery(id).width();
        var height = jQuery(id).height();
        var radius = parseInt(width / 2.20);
        var position = width;
        var positionBy2 = position / 2;
        var bg = jQuery(id)[0];
        id = id.split("#");
        var ctx = bg.getContext("2d");
        var imd = null;
        var circ = Math.PI * 2;
        var quart = Math.PI / 2;
        ctx.clearRect(0, 0, width, height);
        ctx.beginPath();
        ctx.strokeStyle = color;
        ctx.lineCap = "square";
        ctx.closePath();
        ctx.fill();
        ctx.lineWidth = 3;
        imd = ctx.getImageData(0, 0, position, position);
        var draw = function(current, ctxPass) {
            ctxPass.putImageData(imd, 0, 0);
            ctxPass.beginPath();
            ctxPass.arc(positionBy2, positionBy2, radius, -(quart), ((circ) * current) - quart, false);
            ctxPass.stroke();
        }
        draw(percentage / 100, ctx);
    },
    backToTop: function($this) {
        $this.click(function() {
            jQuery("body,html").animate({
                scrollTop: 0
            },
            800);
            return false;
        });
    },
    scrollHook: function($this, color) {
        color = color ? color: "#000000";
        $this.scroll(function() {
            var docHeight = (jQuery(document).height() - jQuery(window).height()),
            $windowObj = $this,
            $per = jQuery(".per"),
            percentage = 0;
            defaultScroll = $windowObj.scrollTop();
            percentage = parseInt((defaultScroll / docHeight) * 100);
            var backToTop = jQuery("#backtoTop");
            if (backToTop.length > 0) {
                if ($windowObj.scrollTop() > 200) {
                    backToTop.addClass("button--show");
                } else {
                    backToTop.removeClass("button--show");
                }
                $per.attr("data-percent", percentage);
                bigfa_scroll.drawCircle("#backtoTopCanvas", percentage, color);
            }

        });
    }
}

jQuery(document).ready(function() {
    jQuery("body").append('<div id="backtoTop" data-action="gototop"><canvas id="backtoTopCanvas" width="48" height="48"></canvas><div class="per"></div></div>');
    var T = bigfa_scroll;
    T.backToTop(jQuery("#backtoTop"));
    T.scrollHook(jQuery(window), "#555555");
});

CSS文件要添加的代码

#backtoTop{
    background-color:#eee;
    border-radius:100%;
    bottom:10%;height:48px;
    position:fixed;
    right:-100px;
    width:48px;
    transition:0.5s;
    -webkit-transition:0.5s
}

#backtoTop.button--show{
    right:10px
}

.per{
    font-size:16px;
    height:48px;
    line-height:48px;
    position:absolute;
    text-align:center;
    top:0;
    width:48px;
    color:#555;
    cursor:pointer
}
.per:before{
    content:attr(data-percent)
}
.per:hover:before{
    content:"↑";font-size:20px
}

wordpress, blog

恢复数据库

恢复 WordPress文件

尾声

tips:

分类

链接

最新文章

标签