wordpress—使用指南

图床设置:wordpress/
虾皮路
免费插件下载
网站速度测试—1

网站速度测试—2
搭建自己的wiki知识管理系统

可能用得上的基础知识:

注意插入公式/代码后,不要全选修改字体!!!否则公式会出现冗余信息。

WP-Optimize,用来删除历史版本,每次要用的时候再activate这个插件。否则网站revisions太多,打开编辑器的时候很容易卡顿。

小技巧

  • 文本突出?
    答:参见这里。在html模式下,使用<mark>我想你</mark>就可以高亮显示我想你,然后可以复制到其他地方,修改其中的内容即可。想设置酷炫的页面,可以适用Elementor。
  • “分类目录”得到文章列表:参考这里。目前我们采用的是Alt+Shift+T,即插入more标签,然后标签之前的就是会显示的内容。
  • “固定链接设置”和“简易目录”以及“翻页”的兼容:如果不设置好,很容易出现网页打不开的现象,这里我们选择仪表盘中的设置,然后选择“固定链接”,最后选择“文章名”。
  • 滚动到顶部插件:WPFront Scroll Top
  • 备份:购买了All-in-WP Migration的无限制版,两个插件,以后不要动了。
  • HTTP/HTTPS/SSL:不要修改,这次就是因为修改了才要重装系统(2022年3月9日)。
  • 如果内容显示区域想要更宽,那么可以选择页面的编辑模式,而不是文章(2022年4月27日)。
  • OSS的位置选择和服务器最好是一样的(内网互通,节约流量),我的就是不一样(以后再改)。
  • 从入门到放弃—新手建站常见12个错误
  • 个人博客oceanWP主题,easyfancy box,WP Spuer Cache
  • CentOS 7开启BBR
  • smartideo-支持优酷腾讯爱奇艺b站视频等
  • 视频托管
  • WordPress网站快速迁移搬家-宝塔面板

 

 

转战OceanWP主题

从2022年6月3日,开始用此主题。相关修改设置如下。

  • 参考oceanWP主题这个视频知道了该主题;
  • 该主题的默认blockquote显示效果不是很好,无法将字体修改为正的,我添加额外CSS也没用。最后退而求其次,添加如下CSS的代码,看着好看一点,但字体还是italic的,无法修改
    blockquote {
    background:#f9f9f9;
    border-left: 6px solid #ccc;
    padding-top: 10px;
    padding-right: 10px;padding-left: 10px;
    width: 95%;
    font: 微软雅黑, Georgia;
    color: #888;
    }
  • 一直想删除breadcrumbs,就是顶上导航目录和文章内容之间的那些字,最后成功解决:
    Disable Breadcrumbs If you want to disable the breadcrumbs in the page title by default you can do so also in the Customizer under Appearance > Customize > General Options > Page Title. 另外将padding都改为0。Visibility改为hide on all devices。

 

 

全站DCDN加速

2022年6月6日,开启阿里云全站加速:WordPress 网站配置阿里云全站加速    全站CDN加速-官方文档

 

 

内容插入相关

  • 插入PDF文件:参见这篇文章
  • 插入空行:现在wordpress在编辑器中直接回车是无法空行的,想要空行,先按下Enter键放开,然后再按下Shift+Enter键即可实现换空行,如果想空好几行,那么重复前面的两个操作即可。
  • 如何插入公式:借助mathpix,可公式以参考这里
    (1) MathJax-LaTeX插件:会有渲染的效果,公式线条更粗,
    行内公式:\(……\)(推荐)和 $…$
    行间公式:$$….$$ (推荐)和 \[…\] (2) latex 语法行内公式:(编辑模式下可见)\(  …… \)
    (3) 行内复杂公式:连加、连乘、极限、积分等大型运算符分别用 \sum, \prod, \lim, \int生成。他们的上下标在行内公式中被压缩,以适应行高。两种方法解决:
    (a)  \( \displaystyle  …… \)(推荐,编辑模式下可见),比如\( \displaystyle  \lim _{n \rightarrow \infty}\left(1+\frac{x}{n}\right)^{n}=e^{x}\) (b) 在mathjax下,我们可以用 \limits 和 \nolimits 来强制显式地指定是否压缩这些上下标,好像不太行,参考这里
  • 插入环路积分符号:
    输入公式的时候有个bug,也就是\oiint  环路双积分符号打不出来,用{\large\bigcirc}\kern-1.55em\iint 替代,参见这里
  • 插入“锚”:
    锚和超链接类似,区别是超链接跳转到另一个完全不同的网页,而点击锚链接(比如#gd)就会滚动到当前网页进行gd锚标记的地方。

    (1) 插入锚链接:选中文字(不选中也行)——插入超链接——输入#****(****表示锚的标记名称)
    (2) 找到需要滚到的页面位置——选中一个地方——插入——锚——输入****
    具体可以见这里。锚和我们PDF左侧的目录有点像,点哪里,就直接跳转到哪里。
  • 插入“页码”:
    插入——分页符。那么一篇很长的文章可以分好几页显示。
  • 快速插入latex公式和希腊字母:可以利用搜狗输入法的固定文本内容快捷键,参见这里。(自定义短语设置)

  • 某个文章中插入某特定分类的全部文章列表:由于MIT-微分方程这个系列内容太多了,于是分成4个小系列,随便点进任意系列,都能找到其他系列的文章链接。实现方法为:
    (1) 启用“Display Posts”插件;
    (2) 在文章页面内输入:注:“List of Posts from each Category plugin for WordPress”插件也能有类似效果。
  • 插入“文章目录”?
    答:对于长文章,我们需要建立目录,这样就可以很容易定位到所需章节,使用的插件是“Easy Table of Contents ”,使用参考见这里
  • 修改页面的布局,Fullwidth Page Templates,可以Create Full width landing pages with any theme.
  • 其他好的插件(待学习):SiteOrigin Page Builder

 

 

初学者资料和服务器配置

  • WordPress大学-WordPress快速入门篇
  • PhpStudy V8.0如何建立WordPress网站?附图文教程(新版本的软件搭建wordpress)
  • 阿里云OSS并配置图床:参考阿里云OSS PicGo 配置图床教程 超详细,参考资料2 。Picgo图床选择URL链接格式,然后在wordpress中插入—图片—源。可能出现的故障解决办法。端口设置参考这里。账号密码在D:\aliyun
  • 将本地wordpress的内容迁移到阿里云:
    (1) 使用All-in-WP Migration 备份和导入,由于导入大小限制,按照原插件的说明手动安装了另外一个插件,实现小于500 M内容的导入。

    (2) 购买阿里云轻量应用服务器,领用镜像直接生成wordpress,域名购买和上云的操作参考B站视频(up主:天马行空灰啊灰)。
  • 宝塔服务器搭建wordpress:我已经按照如何快速搭建自己的网站:阿里云+宝塔+wordpress以及轻量应用服务器访问不了宝塔面板?只需要两步解决问题实现了安装宝塔面板。注意是先安装宝塔,然后再由宝塔配置wordpress;由于我们先前已经通过阿里服务器实现了wordpress的镜像配置,要将其转移到宝塔就比较麻烦,所以不采用这种方法。但是如果是第一次刚接触wordpress的人,学习用宝塔搭建和管理网站更加方便。

  • 添加自己本地写的html(js)文件到wordpress的阿里云服务器上:
    (1) 首先下载WinSCP,WinSCP-SFTP 管理传输软件安装使用教程,服务器地址可以通过轻量服务器概览处的“IP地址: (公)”得到,端口22,用户名root,密码为HjXXXXXXXX(后面几位保密,自己记得就行), 即可登录。然后由winscp,选择根目录root-home-www-htdocs即可到达wordpress的内容目录,比如我们将另外生成的html文件(比如readme.html)可以直接拖动到这个文件夹下面,那么可以由网站http://8.210.49.120/readme.html访问我们的html文件,实现网页显示。不过最好的方法是另外创建一个文件夹,把一堆自制的html文件放在里面,便于管理。比如http://8.210.49.120/preview/touzi.html,就是将touzi.html放在preview这个文件夹中。参考资料:
    怎样用FTP软件手动上传WordPress主题
    如何在wordpress上添加自己编写的HTML页面,这个方法很简单
  • markdwon的html到wordpress:
    如果将Typora中的内容用源代码显示,然后复制该源代码到WP Githuber MD编辑器中会出现格式上的小毛病。同样地,即使将Typora中的内容导出为html,然后用Notepad打开,然后将内容复制到wordpress的传统编辑器的“文本”模式下,同样也会出现格式上的变动。为了避免上述问题,我们可以采用迂回战术。首先将Typora中的内容导出为html文件,然后将该文件直接拖到wordpress的内容编辑框(相当于把html文件作为媒体,可以在“添加媒体”这一个按钮上找到),作为超链接,这样打开的时候可以完整地再现在Typora中的主题。计算机零散小知识汇总

 

 

修改

  • 修改经典编辑器tinyMCE的默认字体:默认的字体是Merriweather,中英文混合显示的时候很不好看,数字和字母出现上下移位的现象。解决方式参见这里

选择在内建的CSS编辑器中编辑并实时预览您的CSS
(1) 最初用的是2.0.8的版本,他对word的ctrl+V不支持,只好仿照FCKeditor的对粘贴事件的判断,在beforepaste前判断粘贴版中的内容,如果有word的关键字便调用他word的粘贴方法进行粘贴,看庞大的js代码,晕来晕去,半天多才改好(不过!,2.1.2版本已经修复这个问题,word内容也可以直接ctrl+v了,happy)
(2) 不管哪个版本,他中文的默认字体都是太小了,编辑了保存以后再拿出来还莫名其妙的变的很大,查资料,看文档,改呗,也是折腾半天;解决方案:js\themes\advanced\css\editor_content.css中的修改为

java 代码
body, td, pre {   
    font-family: Verdana, Arial, Helvetica, sans-serif;   
    font-size: 12px;   
}  

搞定!!

CSS代码(外观-主题-主题编辑器-ccs-css/editor-blocks.css-内建的CSS编辑器-额外CSS)
body, td, pre {   
    font-family: Verdana, Arial, Helvetica, sans-serif;   
    font-size: 10px;   
}  

 

插件

  • WPFront Scroll Top,允许访问者轻松滚动到页面顶部。
  • LiteSpeed Cache插件安装设置图文教程,非常好用,注意,页面优化—JS设置—JS最小化不要开启,否则mathjax不能正常运行。
  • Fullwidth Page Templates,让内容占据两侧空间,但是会改变部分排版效果,所以暂时不用。
  • WP-KaTeX,关闭了好像没有影响。使用方法是\(…\)和\(…\)
  • WPFront Scroll Top,一键回到顶部,好用。
  • 简易目录,目前正在用这个,好用。
  • Table of Contents Plus,也是生成目录,需要在内容中插入代码[(toc)] (删除括号)才会启动
  • Highlighting Code Block,目前正在用,凑合。
  • Fixed Widget,使用 fixed widget小工具插件来创建粘性窗口小工具,这些页面在向上或向下滚动页面时会停留在可见的屏幕区域中,从而提高转化率,可以。
  • Fixed TOC,是插入table of contents的最好用的,不过要收费。
  • 经典小工具(classcial widget), 经典小工具是 WordPress 团队维护的官方插件,用于恢复过去的经典 WordPress 小工具设置界面。此插件将至少维护至2022年,或维护至任何必要时候。外观-小工具。新的小工具不好用。
  • BBSpoiler,借助代码[spoiler title=’Title’]Spoiler content[/spoiler]即可实现内容隐藏和展开。这个和Collapse-O-Matic插件类似,但是后者不能不能和我的PHP版本兼容。这个插件还有人维护,但是问题是会有背景颜色和框图。
  • Show-Hide / Collapse-Expand,这个比BBSpoiler更好用,但是似乎没什么维护这个插件,目前兼容我的wordpress。
  • Collapsing Archives
  • Pure-Highlightjs,适合python,html,C等,不适合matlab,以后用这个插入代码,设置的显示效果为YD-Dark。如果不小心禁用这个插件,再次启用之后不会乱码,只需要重新设定显示模式即可(04/27/2022) 
  • Google Fonts Typography,好用!
  • Drop Shadow Boxes
  • Header Footer Code Manager
  • Advanced TinyMCE Configuration,用途不明确
  • Quotmarks Replacer插件,禁止WordPress将半角符号转换成全角符号。
  • EmbedPress(pro)破解版,插入各种文档,好用,可以配合google slides/google doc
      • google slides有两种显示方式,进入某个ppt后,点击左上角的“文件”,然后选择“共享”即可获取链接(可在网页端登录编辑,但是仅自己可见),或者在第二步选择“发布到网络”(可以设置幻灯片的参数)。

 

 

从 WordPress 到 Hexo——博客搬家

参考这里

搬到宝塔面板的操作记录

原因:想在阿里云轻量应用福服务器控制台升级php,但是试了很多方法,都失败了。(2022/06/03)

操作:

  • 系统镜像和应用镜像对比:重置系统到系统镜像,我之前用的是应用镜像(Cent OS 8.2)。二者的差异参考知乎如下:
      • 系统镜像就是纯净版系统 ,应用镜像就是安装了部分软件的系统。个人建议选择系统镜像,再去安装所需的软件就行,比如宝塔面板一键安装部署。新手的话,可以选择应用镜像,更简单些。
      • 简单来说,系统镜像就是单纯的linux系统,而应用镜像则是在系统内还安装了应用软件,比如lnmp环境,wordpress等。如果你能够熟练操作linux,知道如何去安装配置环境,那么你可以使用系统镜像。如果你不了解linux操作系统,那么你可以选择相应的应用镜像,免去复杂的环境安装配置,可以直接使用。
  • 宝塔面板注册:账号是手机号码,密码是Hxx——-?
  • 宝塔面板的安装:从阿里云轻量服务器——服务器运维——远程连接,进入shell(类似DOS的黑色界面),然后输入宝塔面板Linux面板7.9.2安装脚本,我试了官网给的针对Centos安装脚本,结果报错了,于是改成使用万能安装脚本,成功安装。安装成功后显示如下信息
    外网面板地址: http://8.210.49.120:8888/c3928b11
    内网面板地址: http://172.17.38.230:8888/c3928b11
    username: qlh8p88o   (注:已经修改)
    password: bee9479a   (注:已经修改)
    If you cannot access the panel,
    release the following panel port [8888] in the security group
    若无法访问面板,请检查防火墙/安全组是否有放行面板[8888]端口
  • 防火墙端口放行:阿里云轻量服务器——安全——添加规则
  • 宝塔面板登录:从外网面板地址进入,用户名zhejie,密码hxx—-6xxxxxx。登录后直接配置LNMP环境,php我选7.4,配置完成(大约需要十几分钟)后,选择软件商店——一键部署——wordpress。
  • 宝塔面板-后台终端登录:IP 地址就是 127.0.0.1 (22第二个窗口),这个地址就是本地地址,不需要修改,SSH 账号admin,密码是我的常见密码,参考这里
  • 固定链接格式修改:所有的配置都完成以后,发现之前的链接很多都不能用了,我开始想通过修改Nginx配置文件来解决,但是搜了很多帖子学着修改一直没见效果。最后看了这个视频(wordpress网站建设:从入门到放弃—如何选择固定链接格式)才解决。
      • 第一步,将wordpress的Permalink Settings设置为Custom Structure,链接末尾添加/%post_id%/.html,这样的好处是链接短,不容易重复,有利于SEO。
      • 第二步,宝塔面板——网站——设置——伪静态——wordpress,然后自动生成对应规则,直接保存即可。

参考资料:
(1) 阿里云轻量应用型服务器安装宝塔面板全过程-知乎

 

 

修改记录(日志)

  • 2022年3月6日,外观-小工具-侧边栏,改为“以下拉菜单显示”,”体现层级关系”,“fixed widget”。
  • 尝试在模板的function.php中添加
    function my_custom_sidebar() {
    register_sidebar(
    array (
    ‘name’ => __( ‘Lefttt’, ‘twentysixteen’ ),
    ‘id’ => ‘left-sidebar’,
    ‘description’ => __( ‘Left Sidebar’, ‘twentysixteen’ ),
    ‘before_widget’ => ‘<div class=”widget-content”>’,
    ‘after_widget’ => “</div>”,
    ‘before_title’ => ‘<h3 class=”widget-title”>’,
    ‘after_title’ => ‘</h3>’,
    )
    );
    }
    add_action( ‘widgets_init’, ‘my_custom_sidebar’ );
    后面删除了
  • 弃用“简易目录”和“Table of Contents Plus”,然后用Fixed TOC
  • 2022年3月21日,出现了“建立数据库连接时出错”,然后我选择在阿里云上重启服务器,然后网站又可以正常运行。
  • 2022年3月24日,Mathjax-Latex by Kblog插件勾选了Use MathJax CDN Service?
  • 2022年4月30日
      • 按照修改wordpress默认编辑器tinymce的默认字体Georgia修改了默认字体为Arial,不过其实这个字体对中文无效,最后又恢复原状。
      • 之前通过“外观-自定义-额外CSS”修改了字体到微软雅黑,今天改了一下字体,后面又改回微软雅黑,但是主题字体无法恢复,不知道哪里出了错误。
        body, td, pre {
        font-family: Microsoft YaHei, sans-serif;
        font-size: 15px;
        }
      • 为了修改主题字体,我下载了Google Fonts Typography插件,好用!
      • 删除Highlighting Code Block插件/Read More插件
  • 2022年5月1日,学习了修改WordPress字体大小、段落间距的一种思路
  • 2022年5月2日,参考这里,添加了额外的CSS代码,让h4不再默认大写
    h1, h2, h3, h4, h5, h6 {
    margin:0;
    text-transform:none!important;
    }
  • 2022年5月3日,下载了WP Githuber MD插件,但是有些bug,不如行间公式有方框,暂时不知道怎么解决。
  • 2022年5月6日
      • 想增大文章显示的宽度,添加额外的CSS,根据参考1参考2改写的:
        body:not(.search-results)
        article:not(.type-page) .entry-content{
        margin-left: 20%!important;
        margin-right: 10%!important;
        float: non!importante;
        width:auto!important;
        }
        把之前写在页面的web开发转移到文章的过程中,如果采用上述代码,会出现highlight的代码块右侧太长了,于是将最终定型的CSS修改为如下
        body:not(.search-results)
        article:not(.type-page) .entry-content{
        margin-left: 20%!important;
        margin-right: 15%!important;
        float: non!importante;
        width:70%!important;
        }
      • 阿里云提醒安全,来自WP Database Backup存在可疑的webshell木马(class-wpdb-admin.php,位于/www/wwwroot/qingfengmingyue.tech/wp-content/plugins/wp-database-backup/includes/admin),由于我不用这个备份,现在直接将该插件删除。
  • 2022年5月07日,尝试WP Editor.md,失败,无法行内公式。学习TinyMCE
  • 2022年5月19日,莫名其妙出现”建立数据库连接时出错”,重启了服务器解决了。
  • 2022年5月24日,想学习这个网站的短代码效果,但是不知道怎么办,似乎可以参考这里。最终的解决办法,下载Shortcodes Ultimate Settings插件,然后在General settings-Custom CSS code中添加
    .border {
    font-family: “Roboto Mono”,Consolas,Monaco,monospace;
    font-size: 100%;
    letter-spacing: -0.02rem;
    direction: ltr;
    border: 1.5px dotted rgba(0,0,0,0.5);
    border-radius: 2px;
    padding: 0 6px 3px;
    white-space: nowrap;
    background: rgba(255,255,255,0.5)!important;
    color: #d81b60 !important;
    box-sizing: border-box;
    }
    保存之后,点击编辑面板的insert shortcode,然后选择content-highlight,在Extra CSS Class这一栏填入 border 即可。
  • 2022年5月25日,启用Quotmarks Replacer插件,禁止WordPress将半角符号转换成全角符号。
      • 尝试用Google Drive/Clodue的API和ID作为wordpress的文件管理器(可以配合Embed Any Document插件),但是尝试了一下没有成功,因为需要https开头的网站,我的是http。
      • 插入PDF,参考如何在 WordPress 中嵌入 PDF 文件?,利用谷歌drive实现。在google drive中上传一个pdf,然后双击打开,然后点击右上角三个点的图标,选择在新窗口中打开,在新窗口中再次点击右上角三个点的图标,选择嵌入此项内容,于是可以得到一串代码,将其粘贴在classical editor的html中即可。注意这样得到的效果是自己可见,必须共享文件才可以让其他网站访问者可见。
  • 2022年5月26日,莫名其妙出现”建立数据库连接时出错”,重启了服务器解决了。原因应该是长时间停留在网站,不动。
  • 2022年5月27日,发现如果网页里面出现了http(s)网址链接,会让网页运行编码
  • 2022年5月28日,Error establishing a database connection,重启服务器也没用。解决办法参考访问网站显示Error establishing a database connection 的解决办法,我登录了http://8.210.49.120//wp-admin
  • 2022年6月3日,开始启用oceanwp主题,具体可以参考对应章节。
  • 2022年6月22日,picgo启动失败,按照这里的方法解决了,然后重新配置picgo
  • 2022年8月6日,参考How to Fix a Slow Loading WordPress Dashboard (Step by Step),增加了php的限制内存。

Leave a Reply