wordpress中使用codepen

codepen.io,一个针对网站前端代码设计的开发工具,提供多种效果的网站前端代码设计工具,丰富的案例特效,用户可以demo的基础上开发自己的前端设计。

网站:codepen.io

经常使用codepen以来,突想在wordpress中使用。

方法如下:

  1. 安装插件“codepen embed

  2. 访问codepen的某个项目,点左下角【embed】

QQ20140315-1@2x

  1. 点击右上角【wordpress shortcode】

QQ20140315-2@2x

  1. 可视化状态下,复制文本框中的内容到需要添加的文章中;代码如下:

【codepenembed height=”268″ themeid=”0″ slughash=”Bxsvn” defaulttab=”result”]See the Pen Pure CSS Spinner by FezVrasta (@FezVrasta) on CodePen.[/codepen_embed】

  1. 预览:

    See the Pen Pure CSS Spinner by FezVrasta (@FezVrasta) on CodePen.0

预览效果还可以和源码之间切换,还可以直接跳至codepen.io编辑。

现在就可以尝试了。

codepen官网详解:http://blog.codepen.io/documentation/features/wordpress-plugin/

wordpress官网插件:https://wordpress.org/plugins/codepen-embed/

未经允许不得转载:空洽网 » wordpress中使用codepen

流明天

继续阅读此作者的更多文章