pub:2015.5.22/upd:2016.7.17

WordPress特殊記法チートシート

オレによるオレのためのチートシート

画像の投稿

画像を挿入する場所にカーソルをあわせ、投稿編集画面左上の”Add Media”ボタンから画像を選択すると、wordpressのメディアライブラリの画像を参照するタグを挿入できる。タグの挿入後、必要に応じてタグ内のwidthとhightを調整する。

<a href="http://blooming-taiga-2069.s3.amazonaws.com/2015/05/Screen-Shot-2014-11-23-at-12.55.09.jpg"><img src="http://blooming-taiga-2069.s3.amazonaws.com/2015/05/Screen-Shot-2014-11-23-at-12.55.09.jpg" alt="Screen Shot 2014-11-23 at 12.55.09" width=100% class="alignnone size-full wp-image-6681" /></a>

example(画像)

投稿結果は以下のようになる。タグの挿入時にMedia Liblary画面の右下のプルダウンより、full size以外の値を設定することで、画像を圧縮し他形式で投稿することもできる。
Screen Shot 2014-11-23 at 12.55.09

音楽の投稿、動画の投稿

youtubeの動画ページのURLはhttps://www.youtube.com/watch?v=95GlwrqE44Uのようなフォーマットを持っており、95GlwrqE44Uがその動画のIDを表している。
以下のコードの95GlwrqE44Uを投稿したい動画のIDに置き換えて投稿すると、投稿に動画を埋め込むことができる。

<div class="ytb">
<iframe src="//www.youtube.com/embed/95GlwrqE44U" frameborder="0" allowfullscreen></iframe>
</div>

example(音楽、動画)

埋め込み結果は以下のようになる。

Markdownでの投稿

Word press plugin : JP Markdown を導入し、投稿編集画面右上の編集モードをTextに変更しMarkdownで投稿する。

#### H4!!!
##### H5!!
###### H6!

example(Markdown)

投稿結果は以下のようになる。

H4!!!

H5!!
H6!

投稿を四角で囲む

style.cssに以下の列を設定すると、class=”jbox”であるdivタグで囲った部分が四角で囲まれる。

.single_inside_content div.jbox { padding: 8px 12px 8px 12px; border: 3px groove; border-radius: 6px; }

投稿の例は以下のとおり。

<div class="jbox">
<strong>ソクラテスのことば</strong>
<ol>
<li>自分自身が無知であることを知っている人間は、自分自身が無知であることを知らない人間より賢い。</li>
<li>生きるために食べよ、食べるために生きるな。</li>
</ol>
</div>

example(四角で囲む)

投稿結果は以下のようになる。

ソクラテスのことば

  1. 自分自身が無知であることを知っている人間は、自分自身が無知であることを知らない人間より賢い。
  2. 生きるために食べよ、食べるために生きるな。

表(テーブル)の投稿

Markdownでの投稿で紹介したプラグインを導入して、Markdownの書式で投稿する。

| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| This       |        This |     This     |
| column     |      column |    column    |
| will       |        will |     will     |
| be         |          be |      be      |
| left       |       right |    center    |
| aligned    |     aligned |   aligned    |

example(表)

投稿結果は以下のようになる。

Left align Right align Center align
This This This
column column column
will will will
be be be
left right center
aligned aligned aligned

数式の投稿

Word press plugin : WP LaTeX を導入し、ショートコード[latex]]で囲ったLaTeX書式の数式を投稿する。

[latex]
e^{i pi} + 1 = 0
[/latex]

example(数式)

投稿結果は以下のようになる。
e^{i pi} + 1 = 0

コードの投稿

Word press plugin : SyntaxHighlighter Evolved を導入し、ショートコード[[言語名]]で囲ったコードを投稿する。

[c gutter="false"]
#include <stdio .h> 
int main(){
    printf("hello, worldn");  
    return 0;
}
[/c]

example(コード)

投稿結果は以下のようになる。

#include <stdio.h> 
int main(){
    printf("hello, worldn");  
    return 0;
}

javascriptの投稿

Word press plugin : Wp-D3を導入し、ショートコード[ d3-source ]で囲ったコードを投稿する。なお、Wp-D3はD3.js用のプラグインであるためD3.jsを用いた投稿にも同手法を使うことができる。

[d3-source canvas="js"]
window.onload=init;
window.onresize=resize;
function init() {
draw();
}
function resize() {
draw();
}
function draw() {
var element = document.getElementsByClassName("js");
element[0].innerHTML = "";
var svgWidth = element[0].clientWidth;
var svgHeight = element[0].clientWidth/2.15;
var margin = {top: 5, right: 5, bottom: 25, left: 25};
var width = svgWidth - margin.left - margin.right;
var height = svgHeight - margin.top - margin.bottom;
var xMin = 0;
var xMax = 50;
var xTicks = 30;
var dataSet = [
    43,  43,  43,  42,  41,  40,  40,  39,  39,  39,  38,  38,  38,  38,  38,
    38,  37,  37,  37,  37,  37,  37,  37,  36,  36,  36,  36,  36,  36,  35,
    35,  35,  35,  35,  34,  34,  34,  34,  33,  33,  33,  33,  32,  32,  32,
    32,  32,  31,  31,  31,  31,  30,  30,  29,  29,  29,  29,  29,  29,  29,
    29,  28,  28,  28,  28,  28,  28,  28,  28,  28,  28,  27,  27,  27,  27,
    27,  26,  26,  26,  26,  26,  25,  25,  25,  25,  25,  25,  25,  24,  24,
    24,  24,  24,  24,  24,  24,  24,  23,  23,  23,  23,  22,  22,  22,  22,
    22,  22,  22,  22,  22,  21,  21,  21,  21,  21,  21,  21,  20,  20,  20,
    20,  19,  19,  19,  18,  18,  18,  17,  17,  16,  16,  15,  15,  15,  15,
    15,  14,  14,  14,  14,  13,  12,  10,  10
];
var xScale = d3.scale.linear()
    .domain([xMin, xMax])
    .range([0, width]);
var data = d3.layout.histogram()
    .bins(xScale.ticks(xTicks))
    (dataSet);
var yScale = d3.scale.linear()
    .domain([0, d3.max(data, function(d) { return d.y; })])
    .range([height, 0]);
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");
var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");
var svg = d3.select(".js")
    .append("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(0,0)")
    .call(yAxis);
var bar = svg.selectAll(".bar")
    .data(data)
    .enter()
    .append("g")
    .attr("class", "bar")
    .attr("transform", function(d) { return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")"; });
bar.append("rect")
    .attr("x", 1)
    .attr("width", xScale(data[0].dx) - 1)
    .attr("height", function(d) { return height - yScale(d.y); });
}
[/d3-source]

example(javascript)

投稿結果は以下のようになる。

twitter投稿の埋め込み

埋め込みたいtweetのその他ボタンをクリックし、Embedet Tweetをクリックした先のダイアログからより埋め込み用のコードが取得できる。
取得したコードをそのままWordpressの投稿フォームに貼り付ける。埋め込み用コードの形式は以下のようになる。

<div class="tweet">
<blockquote class="twitter-tweet" lang="en">
<p lang="ja" dir="ltr">モノグラム - Wikipedia これ中二力高い <a href="https://t.co/xh6GiAnQaP">https://t.co/xh6GiAnQaP</a>
</p>— w256 (@w256) <a href="https://twitter.com/w256/status/613189395248603136">June 23, 2015</a>
</blockquote> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

example(twitter埋め込み)

投稿結果は以下のようになる。

WordPressショートコードをそのまま投稿(ショートコードのエスケープ)

二重に角カッコ[[]]で囲って投稿すると角カッコがエスケープされる。

[[somecode]]
[[/somecode]]

example(エスケープ)

投稿結果は以下のようになる。
[somecode]
[/somecode]

定型文の投稿

Post Snippetsを利用すると、オリジナルのショートコードを作成して定型文を紐付けできる。以下は、[wpkuso]に対して、「(´・ω・)Wordpressとかクソだろ(´・ω・)」を紐付けた例。

[wpkuso]

example(定型文挿入)

(´・ω・)Wordpressとかクソだろ(´・ω・)

脚注の投稿

FD Footnotes Pluginを利用すると、脚注を挿入できる。以下は、「Wordpressサイコーですね」に対して、「(´・ω・)Wordpressとかウンコだろ(´・ω・)」を脚注として付与した例。

example(定型文挿入)

Wordpressサイコーですね1

  1. (´・ω・)Wordpressとかウンコだろ(´・ω・)

Leave a Reply

Your email address will not be published.