Axton Yao
Always Dream. Always Explore.
无垠
MDx主题文档

为了更好的浏览体验,即日起 MDx 文档转移至 Gitbook,本页面不再更新。

你可以通过以下链接前往新的文档:

MDx 文档(为国内网络优化)

MDx Docs


MDx,一款轻快、优雅且强大的 Material Design 风格 WordPress 主题

欢迎使用 MDx 主题。

在开始之前

在开始使用 MDx 之前,你需要了解一些信息:

  • MDx 对于浏览器的兼容情况:IE 10+ 以及绝大部分现代浏览器
  • MDx 的发布方式为免费发布且公开源代码,使用 GPL V3.0 许可证
  • MDx 目前仍在不断完善中,会在一段时间内持续更新
  • MDx 仅在 WordPress 4.8+ 下进行过测试,但理论上支持 WordPress 4.2 及更新版本,若出现问题请向我反馈

MDx 的Github 地址是:

yrccondor / mdx

MDx QQ 交流群687577787,欢迎来水~

安装 MDx

你只需要打开 WordPress 后台的添加主题页,并按页面上的提示上传安装包即可。

更新 MDx

MDx 接入了 WordPress 的更新机制,当 MDx 有新版本发布时,你只需根据 WordPress 给出的说明更新即可。

你也可以选择手动更新。你只需下载 MDx 新版的安装包,并完全覆盖旧版本的文件即可。

个性化

当主题被激活后,你的后台菜单中将会出现 MDx设置 选项,你可以在此对你的主题进行个性化设置。

注意
在第一次启用主题之前预览主题可能会导致显示不正确。请先启用主题再查看显示效果。

激活菜单

当主题被激活后,你可能会发现抽屉菜单中的菜单样式与预期不符。可能像这样:
https://img.flyhigher.top/wp-content/uploads/2017/11/24416.jpg
不要担心,只需简单的设置即可使其恢复正常:
打开后台设置项中的 外观 > 菜单 ,并新建一个菜单或选择原有菜单,并在菜单的“显示位置”中勾选“抽屉菜单”,保存即可。就像这样:
https://img.flyhigher.top/wp-content/uploads/2017/11/5447.jpg

注意:你必须已有菜单或先新建菜单才能勾选此设置。

在菜单中添加图标

要在菜单中添加图标,你需要修改你的菜单设置。

首先从 MDUI 图标库 中找到你想要的图标,并点击它,复制任意一段由页面提供的代码。这段代码应该像这样:

随后,在菜单设置中,把这段代码粘贴在菜单项的名称之前,并在代码与原名称之间添加一个空格。就像这样:

https://img.flyhigher.top/wp-content/uploads/2017/11/13.jpg

接着,如果需要的话,对其余菜单项也进行相同的处理。

最后保存你的修改,MDx 会处理好图标的样式。

评论表情

MDx 在后台设置中提供了评论表情开关,但开启表情后仍需安装来自 mayuko 的 Alu 表情插件。请点此下载适用于 MDx 的魔改版。

目前已知评论表情按钮在用户已登录状态下会错位(不影响使用)。由于 MDx 并没有加入多用户支持,因此此问题可能永远不会修复

短代码

MDx 目前提供了4种短代码,要查看它们的显示样式请查看 这个页面
1. 折叠内容
基本用法:

你可以使用以下属性:

属性名默认值可选值备注
title被折叠内容任意字符串
openfalsefalse/true值为 true,则折叠内容默认为打开状态

例子:

注意事项:
1. 属性都不是必须的,当没有指定属性值时将使用默认值
2. 短代码与内容间的换行会被显示出来,建议短代码与内容的第一行、最后一行之间不要换行
2. 警告内容
基本用法:

你可以使用以下属性:

属性名默认值可选值备注
title警告任意字符串

例子:

注意事项:
1. 属性都不是必须的,当没有指定属性值时将使用默认值
2. 短代码与内容间的换行会被显示出来,建议短代码与内容的第一行、最后一行之间不要换行
3. 表格
基本用法:

你可以使用以下属性:

属性名默认值可选值备注
headerfalsefalse/true值为 true,则表格第一行将作为表头
hovertruetrue/false值为 true,则表格内容行会响应鼠标悬浮状态

表格内容:
换行表示结束一个单元格,最后一个单元格不需要额外换行
5个 – 单独一行表示结束一个行,最后一行不需要结束行
例子:

注意事项:
1. 属性都不是必须的,当没有指定属性值时将使用默认值
2. 短代码与内容间的换行会被显示出来,建议短代码与内容的第一行、最后一行之间不要换行
4. 进度指示器
基本用法:

这个短代码没有属性可用。
例子:

关于 一些 PHP 错误

在使用 MDx 时,你可能会发现一些预料之外的 PHP 错误。不要紧张,很有可能这不是 MDx 的问题。这一段内容将讨论以下一些错误:

  • 未定义函数 mb_strimwidth()
  • 在评论中出现 Use of undefined constant警告
  • 在后台出现 file_get_contents() 警告
未定义函数 mb_strimwidth()
keyboard_arrow_down


MDx 使用了此函数来截断字符串以生成摘要。此问题出现于 php.ini 中未启用此函数的情况下,尤其是自行安装的 PHP。
要解决此问题,你可以在 php.ini 中启用此函数。以 PHP 7.2.0 为例,找到:

去除第一个分号即可。即:

其他版本的 PHP 启用方法可能稍有不同。

在评论中出现 Use of undefined constant警告
keyboard_arrow_down


此错误来自 function.php 中的一个无用函数。并非所有版本的 PHP 都会抛出此警告。MDx 使用此函数来将插入到评论中的图片链接转为 <img> 元素进行显示。我们决定将于下次更新中移除此函数,因为它违背了 MDX 的“功能最小化”原则,即不会提供除主题应提供的功能之外的其他功能。要重新启用此功能,我们推荐你创建子主题(请参阅 WordPress 帮助)来将此功能添加回 MDx。要了解详细,请参阅 commit 1650fdc

在后台出现 file_get_contents() 警告
keyboard_arrow_down


此错误发生于 MDx 试图从 CDN 获取最新版本信息时。由于你的 php.ini 限制导致 MDx 无法从启用了 https 的 CDN 中获取版本信息。要解决此错误,你可以修改 php.ini 来启用 openssl。以 PHP 7.2.0 为例,找到:

去除第一个分号即可。即:

其他版本的 PHP 启用方法可能稍有不同。在 Linux 中你可能需要先安装 OpenSSL (很可能已经安装)。

在接下来的更新中,我们可能会使用其他方式获取版本信息来避免此错误。

关于 ImgBox

MDx 内置了 ImgBox功能,即访客可以通过点击文章内的图片来放大显示图片。此功能只会作用于包裹在链接中的图片。您可以选择在设置中关闭此功能。

关于 实时搜索

当 实时搜索 功能开启时,访客在进行搜索时页面会随访客的输入实时反馈搜索结果。

此功能依赖于 WordPress REST API。此 API 默认开启,请确保你没有将其关闭。对于 WordPress 4.4 以下版本的用户,可以安装官方插件 WordPress REST API (Version 2) 来开启此API。

修改页脚内容

MDx 在后台设置中提供了页脚内容编辑设置,但 HTML 内容会被转义。若要插入 HTML 内容,请修改 主题根目录/footer.php 文件。

注意
直接修改 footer.php 会导致主题更新后你的修改丢失。请考虑参考 WordPress 官方说明创建 子主题 进行修改。

关于 页面模板

MDx 拥有一个普通页面样式和两种页面模板,分别是:

  1. links 友情链接模板。此模板会调取后台设置中的“链接”
  2. postlike 使用此模板可使页面的样式与文章页类似

你可以在创建页面时对每一个页面分别设定不同的模板。

关于 MDUI 框架

MDx 内置了 MDUI 框架的 0.3.0 版本。此框架位于 主题根目录/mdui/ 下。

如果你希望借此进行其他开发,请注意:

  • 内置版本中的 CSS 文件已被改动过,请从 MDUI 官方下载 MDUI 框架并自行替换
  • 内置版本中的 fonts 文件夹已被移除,如果需要请自行从 MDUI 官方下载并添加

关于 jQuery

MDx 内置了 jQuery 3.2.1 版本。此文件位于 主题根目录/js/ 下。

在v1.2及更早的版本中,MDx 内置了jQuery 2.1.4 版本。

协助开发

你可以前往 MDx 的代码仓库了解更多。我们非常欢迎你为 MDx 做出贡献。

赞赏
本文采用 CC BY-NC-SA 3.0 Unported 协议进行许可。
本文链接: --PostURL--

发表评论

textsms
account_circle
email

  • https://secure.gravatar.com/avatar/a3a1dd9182117005d07ad0952069971e?s=80&d=mm&r=r
    小小白

    试一下表情:smile: :cool: :evil: :idea:

    2周前回复
  • https://secure.gravatar.com/avatar/31eb39cff333052eba67144fc9f0606b?s=80&d=mm&r=r
    闹钟

    主题很好看,谢谢

    3月前回复
  • https://secure.gravatar.com/avatar/03841e819e74d21655ae4adcd9e61c80?s=80&d=mm&r=r
    Lexus

    版主,有打算开发个wordpress跟微信公众号对接的程序么。

    4月前回复
    • https://secure.gravatar.com/avatar/40576c4b7e844c7b7f5b3bc50c14b42e?s=80&d=mm&r=r
      Axton博主

      @Lexus: 没有。一是最近实在没有时间,二是已经有别人开发的现成的插件了,你可以去了解一下

      4月前回复
  • https://secure.gravatar.com/avatar/15b0dbad253ee6b27e93dc9e5ada0bf3?s=80&d=mm&r=r
    主席

    更新之后发现首页展示图片div的高度变了…..

    6月前回复
    • https://secure.gravatar.com/avatar/40576c4b7e844c7b7f5b3bc50c14b42e?s=80&d=mm&r=r
      Axton博主

      @主席: ???我没动过首页啊

      6月前回复
      • https://secure.gravatar.com/avatar/15b0dbad253ee6b27e93dc9e5ada0bf3?s=80&d=mm&r=r
        主席

        @Axton: 那应该是我不知道哪里的问题…..

        6月前
  • https://secure.gravatar.com/avatar/0ba0bc86dcdbe042fd7370f1306d3b07?s=80&d=mm&r=r
    ninjiacoder

    请问如何更改页面的模板,在控制台没有看见这样的选项

    6月前回复
    • https://secure.gravatar.com/avatar/40576c4b7e844c7b7f5b3bc50c14b42e?s=80&d=mm&r=r
      Axton博主

      @ninjiacoder: 在新建/修改页面时在编辑器右侧有 页面属性 面板,其中有 模板 选项可为每个页面单独指定样式。

      6月前回复
  • https://secure.gravatar.com/avatar/15b0dbad253ee6b27e93dc9e5ada0bf3?s=80&d=mm&r=r
    主席

    请问能在评论区加入表情吗?换了这套主题之后发现我的滑稽消失了….
    还有就是文章的分享按钮,希望能居中,点按后能弹出一栏图标,而不是一行简陋的文字
    具体实现效果跟思路我都有,但是不会改……

    6月前回复
    • https://secure.gravatar.com/avatar/40576c4b7e844c7b7f5b3bc50c14b42e?s=80&d=mm&r=r
      Axton博主

      @主席: 评论表情计划在下次更新时加入。分享按钮会考虑的(我也觉得有点丑_(:з」∠)_ 感谢建议!

      6月前回复
      • https://secure.gravatar.com/avatar/40576c4b7e844c7b7f5b3bc50c14b42e?s=80&d=mm&r=r
        Axton博主

        @Axton: 其实是下下次,v1.4.1 马上发布

        6月前
      • https://secure.gravatar.com/avatar/15b0dbad253ee6b27e93dc9e5ada0bf3?s=80&d=mm&r=r
        主席

        @Axton: 我这边已经改造的七七八八了
        我想问问 如何改造theFirstPageSay
        我打算改造成上下两个div的 无奈受限于mdui-valign 两个div的文字挤在了一起 有什么办法能让有mdui-valign的div分出两行吗?

        6月前
      • https://secure.gravatar.com/avatar/40576c4b7e844c7b7f5b3bc50c14b42e?s=80&d=mm&r=r
        Axton博主

        @主席: 在一个div里换行,设置这个div的 text-align 为 center,宽度100%即可(我记得是这样

        6月前
      • https://secure.gravatar.com/avatar/15b0dbad253ee6b27e93dc9e5ada0bf3?s=80&d=mm&r=r
        主席

        @Axton: 还有就是建议加入评论回复的邮件提醒功能
        https://www.wpdaxue.com/wordpress-comment-mail-notify-smtp.html
        具体可以看看这个 邮件的样式可以自定义 希望这个主题能够越做越好
        博主有邮箱或者其他什么的么?

        6月前
      • https://secure.gravatar.com/avatar/40576c4b7e844c7b7f5b3bc50c14b42e?s=80&d=mm&r=r
        Axton博主

        @主席: 这个功能 WordPress 有提供的,装几个插件就可以自定义发件服务器和邮件样式了

        6月前
      • https://secure.gravatar.com/avatar/15b0dbad253ee6b27e93dc9e5ada0bf3?s=80&d=mm&r=r
        主席

        @Axton: 貌似是不行的 文字还是会挤在一行居中

        6月前
      • https://secure.gravatar.com/avatar/40576c4b7e844c7b7f5b3bc50c14b42e?s=80&d=mm&r=r
        Axton博主

        @主席: 那要看具体情况了,并不知清楚被你改成啥样了

        6月前
      • https://secure.gravatar.com/avatar/40576c4b7e844c7b7f5b3bc50c14b42e?s=80&d=mm&r=r
        Axton博主

        @主席: 找到你的站了,请把版权链接加回来谢谢。

        6月前
      • https://secure.gravatar.com/avatar/40576c4b7e844c7b7f5b3bc50c14b42e?s=80&d=mm&r=r
        Axton博主

        @主席: 或者花30RMB买个授权也可以(

        6月前
      • https://secure.gravatar.com/avatar/15b0dbad253ee6b27e93dc9e5ada0bf3?s=80&d=mm&r=r
        主席

        @Axton: 加了,其实我是想加到about页面的

        6月前
      • https://secure.gravatar.com/avatar/40576c4b7e844c7b7f5b3bc50c14b42e?s=80&d=mm&r=r
        Axton博主

        @主席: 好的,感谢

        6月前
      • https://secure.gravatar.com/avatar/15b0dbad253ee6b27e93dc9e5ada0bf3?s=80&d=mm&r=r
        主席

        @Axton: 有赞助的链接吗?

        6月前
      • https://secure.gravatar.com/avatar/40576c4b7e844c7b7f5b3bc50c14b42e?s=80&d=mm&r=r
        Axton博主

        @主席: 有二维码…

        6月前
    • https://secure.gravatar.com/avatar/40576c4b7e844c7b7f5b3bc50c14b42e?s=80&d=mm&r=r
      Axton博主

      @主席: v1.5.0 现已发布,添加了包括评论表情在内的数项更新。要激活评论表情功能请参阅上文。Demo: :mrgreen: :shock: :smile: :idea: :razz: :roll: :!:

      6月前回复
      • https://secure.gravatar.com/avatar/15b0dbad253ee6b27e93dc9e5ada0bf3?s=80&d=mm&r=r
        主席

        @Axton: 我页面上一堆bug啊………. :eek:

        6月前
      • https://secure.gravatar.com/avatar/15b0dbad253ee6b27e93dc9e5ada0bf3?s=80&d=mm&r=r
        主席

        @Axton: 图片显示不出来、搜索栏不能打开、顶栏消失…
        各种问题啊……

        6月前
      • https://secure.gravatar.com/avatar/40576c4b7e844c7b7f5b3bc50c14b42e?s=80&d=mm&r=r
        Axton博主

        @主席: 可能是 js 错误,可以看一下浏览器控制台有什么输出。重新下载最新的安装包覆盖安装可能有所帮助。

        6月前
      • https://secure.gravatar.com/avatar/40576c4b7e844c7b7f5b3bc50c14b42e?s=80&d=mm&r=r
        Axton博主

        @主席: 问题看起来比较普遍,我正在测试。

        6月前
      • https://secure.gravatar.com/avatar/40576c4b7e844c7b7f5b3bc50c14b42e?s=80&d=mm&r=r
        Axton博主

        @主席: 已经释出新版本,修复了这个问题。因为一条关键js没有成功调用…

        6月前
      • https://secure.gravatar.com/avatar/15b0dbad253ee6b27e93dc9e5ada0bf3?s=80&d=mm&r=r
        主席

        @Axton: 我现在在做泡泡表情包 :wink:

        6月前
      • https://secure.gravatar.com/avatar/15b0dbad253ee6b27e93dc9e5ada0bf3?s=80&d=mm&r=r
        主席

        @Axton: 一直给你提问题,添了好多麻烦……

        5月前
      • https://secure.gravatar.com/avatar/15b0dbad253ee6b27e93dc9e5ada0bf3?s=80&d=mm&r=r
        主席

        @Axton: 又出错误了…….底部排版抽风
        二维码显示不出来
        CCBYSA那一栏没有文字…….

        5月前
      • https://secure.gravatar.com/avatar/40576c4b7e844c7b7f5b3bc50c14b42e?s=80&d=mm&r=r
        Axton博主

        @主席: 你现在在使用哪个版本?看起来不像是1.7.0
        我到目前为止没有发现类似的的其他反馈(倒是自己发现了一个 bug…),建议你加入 MDx 的 QQ 交流群(687577787)方便交流啦

        5月前
      • https://secure.gravatar.com/avatar/40576c4b7e844c7b7f5b3bc50c14b42e?s=80&d=mm&r=r
        Axton博主

        @主席: 以及我明明往 MDx 后台推了 QQ 交流群有关的信息怎么没人来2333你们都不看后台“关于”页的么

        5月前

无垠

MDx主题文档
为了更好的浏览体验,即日起 MDx 文档转移至 Gitbook,本页面不再更新。 你可以通过以下链接前往新的文档: MDx 文档(为国内网络优化) MDx Docs MDx,一款轻快、优雅且…
扫描二维码继续阅读
2017-11-06