wordpress 深度集成 markdown

wordpress 的编辑器没有 markdown 功能,曾今寻便所有的 plugin ,发现都不太理想,并且作为一个非插件控的我,即使找到了大而全的插件,也会想方设法来去插件化。于是今天早上拍了下脑门,决定自己集成 markdown。 集成后的功能如下:

  • 实时预览 即见即所得,甚至你可以作为一个专门的 markdown 编辑器来使用
  • 代码高亮 程序员最爱,需要在前台做代码高亮
  • 代码分离 markdown 的代码和 html 代码分离,互不影响,并且会将 markdown 代码保存下来,以便下次继续编辑。 先看下效果 markdown

原理

在 post 页面添加一个 textarea,监听 input 事件,事件中将文本框的内容取出,用 marked.js 进行转码,将转码后的 html 放在系统中的 tinyMCE 中。 在保存时将 textarea 中的文本存入 media data 中,下次可以继续编辑。 ## 开始集成

  1. 下载 marked.jsmakemarkdown.js

  2. marked.jsmakemarked.js 拷贝到 ~\wp-content\{你的主题目录}\js\ 目录下 > marked.js 是一套 js 库,用于将 markdown 代码转换成 html。makemarked.js 用于监听文本框事件,来实时调用 marked.js 来转换 markdown 代码。

  3. function.php中加入以下代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <pre class="lang:php decode:true">// 增加 markdown 功能到后台编辑器
    add_action( 'admin_menu', 'create_markdown' );
    add_action( 'save_post', 'save_markdown', 10, 2 );

    function create_markdown() {
    add_meta_box( 'markdown_box', 'Markdown', 'markdown_html', 'post', 'normal', 'high' );
    }

    function markdown_html( $object, $box ) { ?>
    <textarea name="markdown" id="markdown" cols="60" oninput ="markdownEditorChanged()" rows="50" style="width: 100%; height:100%"><?php echo htmlspecialchars (get_post_meta( $object->ID, 'markdown', true )); ?></textarea>
    <?php }

    function save_markdown( $post_id, $post ) {
    if ( !current_user_can( 'edit_post', $post_id ) )
    return $post_id;

    $meta_value = get_post_meta( $post_id, 'markdown', true );
    $new_meta_value = $_POST['markdown'];

    if ( $new_meta_value && '' == $meta_value )
    add_post_meta( $post_id, 'markdown', $new_meta_value, true );

    elseif ( $new_meta_value != $meta_value )
    update_post_meta( $post_id, 'markdown', $new_meta_value );

    elseif ( '' == $new_meta_value && $meta_value )
    delete_post_meta( $post_id, 'markdown', $meta_value );
    }

    function markdown_script() {
    wp_enqueue_script('markdown', get_template_directory_uri() . '/js/marked.js' );
    wp_enqueue_script('makemarkdown', get_template_directory_uri() . '/js/makemarkdown.js');
    }

    add_action( 'admin_enqueue_scripts', 'markdown_script');</pre>

目前后台的工作已经 ok,代码高亮需要在前台设置,参见后续文章

解除 wordpress 上传文件大小限制的最新方法

环境

阿里云的虚拟主机

wordpress 4.4 在此环境上,上传文件的大小被限制在 6M 以下,

网上的方法基本上可分为三类
1. 修改 function.php

2. 修改 php.ini

3. 修改 .htaccess

插件方法

以上的方法不再适用,可能是 wordpress 版本比较新,最后找到一个名为 Upload Max File Size 的插件。 A1B9BC06-CAF9-4F29-A655-58B1D10BEA9C 数值单位为比特,需要自己转换单位。

去插件化

查看该插件源码发现,只要一行代码就可以解决问题 add_filter('upload_size_limit', 'ashu_increase_upload'); OK,将该行代码复制到当前主题下的 function.php 中,将 ashu_increase_upload 修改为 max_file_size,再新建 max_file_size 的方法,在该方法中返回新的大小值。

最后的代码如下。

1
2
3
4
5
6

function max_up_size() {
return 64*1024*1024; // 62 MB
}

add_filter('upload_size_limit', 'max_up_size');

如何将任意网页分享到朋友圈

对与有些人来说,有时候需要将网页直接分享到朋友圈,但是又不想为此做一个公众账号,怎么办? 我在此分享三个简单可靠的办法,可以将任何网页分享到朋友圈,甚至是不懂技术的人也可以操作。是的,任何网页,比如是你的主页、或者你的淘宝商品、你要营销的页面。。。随你发挥想象力,只要是网页都可以。

方法1 直接分享

在电脑上打开你要分享的网页,将地址想办法发送到手机微信上,或者直接在微信的对话框里键入地址。点开该链接,这时候微信内置的浏览器会打开这个页面,然后点击右上角菜单,选择分享到朋友圈。

S50828-163029

方法2 手动分享

在电脑上打开该页面 http://cli.im/ 这个网页的功能可以将网页地址生成二维码,将要分享的网页地址粘贴到此处,然后点击生成二维码。说到这里,大家都应该懂了吧。是的,将微信的扫一扫对准插件所生成的二维码,这时候微信就会打开该链接,剩下的操作同方法1,从右上角的菜单分享到朋友圈。

QQ截图20150828163319

方法3 自动分享

此方法最为简单,不过需要你使用 chrome 浏览器,同时你的网络能够访问谷歌应用商店,如果访问不了,请自行切换到文明上网模式。 打开浏览器上的 chrome 网上应用商店,搜索 the-qr-code-extension ,安装该插件。该插件的功能是将当前的网页地址自动生成一个二维码。记住,这个二维码和方法二生成出来的无异,所以接下来的操作完全参考方法2

8O0(MTMTR588