如何在Wordpress中显示来自Jsfiddle或Github的代码?

时间:2014-10-11 07:24:32

标签: wordpress wordpress-plugin

我创建了自己的个人博客。 wordpress中的免费版本不是溢价。我想在我的博客中展示一些来自github和jsfiddle的例子。

是否可以免费版wordpress?我不确定。

我是新闻词。请帮忙。

4 个答案:

答案 0 :(得分:3)

无法发表评论,因为我对该网站来说太新了,但您使用的是自行托管下载的wordpress.org,还是您使用免费托管的wordpress.com? (如果您的博客链接是username.wordpress.com,那么它是托管版本)

如果您使用托管的wordpress.com版本,则无法安装插件,但您可以通过以下方式嵌入Github Gists;将地址栏中的URL复制/粘贴到帖子中的自己的行中。编辑"引自:http://en.blog.wordpress.com/2012/04/18/spotify-rdio-and-github-embeds/看起来他们不支持从Github嵌入任何其他东西。

如果您正在使用自托管版本,则可以使用"插件"安装插件(例如github嵌入插件)。屏幕(显示在管理面板上的“外观”下,见下面的屏幕截图)。完整说明:http://codex.wordpress.org/Managing_Plugins wordpress plugins screen

答案 1 :(得分:2)

在没有任何插件的情况下嵌入js-fiddle

  1. 转到您的小提琴,在顶部菜单中,点击嵌入
  2. 您可以看到这样的弹出窗口enter image description here
  3. 现在在底部,您可以看到书面嵌入代码,并且可以选择使用脚本首选iframe
  4. On selecting Use script On selecting Prefer iframe

    1. 对于Wordpress,您需要选择iframe,然后复制框中给出的ifram代码。
    2. 现在,在Wordpress编辑器中,转到文本模式而不是可视模式并粘贴复制的代码。
    3. 现在切换回 Visual 模式,您可以在博客中看到js-fiddle。

答案 2 :(得分:1)

嗯,我也是一个免费的wordpress用户,例如example.wordpress.com。 我认为你最好的选择是将代码存储在github的gist中,并使用wordpress网站中的嵌入链接。

e.g。如果有一个文件: https://gist.github.com/AlyssonJalles/9503c6c5d3dc63e9a561 你必须寻找"直接链接"在您的网站上发布。获取直接链接,删除链接中的用户名和终止.git,如:https://gist.github.com/9503c6c5d3dc63e9a561

之后你进入wordpress网站,打开页面编辑器并关闭" visual"并粘贴直接链接。这很酷,因为当您更新代码时(在Gist中),您的wordpress页面也会更新。 在您发布的页面中,您将看到Github的嵌入链接,如此(运行代码片段也可以查看!)。



<script src="https://gist.github.com/AlyssonJalles/9503c6c5d3dc63e9a561.js"></script>
&#13;
&#13;
&#13;

答案 3 :(得分:-1)

在您的博客上分享一个jsfiddle很容易。

  1. 在帖子下点击添加新
  2. 在主要内容textarea的右上角,您可以在文本编辑器和Visual编辑器之间进行选择。选择文字。
  3. 转到您的jsfiddle页面,点击顶部菜单中的“共享”并复制iframe代码。
  4. 将iframe代码粘贴到帖子主要内容的“文本”视图中。
  5. 不要忘记添加一些解释项目的文字;)

    至于github,我不认为他们默认提供嵌入功能,但你可以使用WordPress插件来嵌入你的项目:https://wordpress.org/plugins/github-embed/

    我希望这有帮助!