WordPressのブログ上で、ソースコードを表示して、読者の方々に作業工程を表示したいことがあります。
ソースコードをwindows 10 のペイントなどで加工したものを貼り付けると、読者の方がソースコードを使用できなくなってしまいます。
また、ソースコードを表示するにはプラグインのインストールおよび、function.phpの加工など様々です。
今日、記載するのは、SEOツールネットです。ワードプレス上のブログにソースコードを記載することが比較的少ない場合、かつ、プラグインやfunction.phpの加工を必要としない、簡易な、ソースコードの表示方法には、SEOツールネットが大変便利です。
以下、記事を記載します！
1例として、youtubeを入れた場合の、ソースコードをブログ上に掲載しました。
WordPressにソースコードを表示！プラグイン・php加工不要の特徴！
ブログの読者に、伝達したいソースコードがあっても、ペイントなどで加工した場合は、ブログの読者がそのままコピーペーストで使用できないという問題点があります。
そこで、今日は、即、ブログの上に記載してあるソースコードをそのままコピーペーストして使用できるタイプを記載します。
ソースコードの表示には、SEOツールネットを使用しました。下記にURLを貼り付けました。メリットとデメリット双方併記します。
メリット
プラグインのインストールやfunction.phpなどの加工を伴わないという点は、最大のメリットです。
導入に伴う時間やブログが重くなることについて回避できます。
長いソースコードでも、瞬間的にブログ上に記載できる文体に変換してくれます！
無料（ゼロ円）で使用できる点が最高です！
デメリット
ソースコードをブログに表示する回数が少ない場合は、良いのですが、変換数が多い場合は、やはり、プラグインやfunction.phpの加工の方が、絶対使用しやすいです！
WordPressにソースコードを表示！プラグイン・php加工不要！簡単作業SEOツールネット
ソースコードをワードプレス上で、適正に表示するにはプラグインなどの方法がありますが、頻繁にソースコードの表示を行わないならば、以下のソースコードの変換ソフトを使用しても十分OKだと思います！
以下、記載する変換ソフトは、インストールの必要がなく、WEB上で瞬時に、かつ、簡単にソースコード（ショートコード）を変換してくれます！
今回は、下記のURLのSEOツールネット変換ソフトを使用します。
WordPressにソースコードを表示！重くならないyoutubeコード！
下記のソースコードは、WordPress上にyoutubeをのせても、WordPressを使いやすく、また、ブログが重くなりにくいというソースコードです！
このソースコードを、読者の方が、即、利用できるようにブログ上に表示します。
<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>
<iframe width="500" height="315" src="" data-src="//www.youtube.com/embed/AqS4aNi0HQY" frameborder="0" allowfullscreen></iframe>
WordPressにソースコードを表示！プラグイン・php加工不要！SEOを使った作成例！
1.まず、下記画像のように、SEOツールネット変換ソフトを使用して、下記のソースコードをコピーペーストします。
<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>
<iframe width="500" height="315" src="" data-src="//www.youtube.com/embed/AqS4aNi0HQY" frameborder="0" allowfullscreen></iframe>
Html Code欄、青い矢印の部分に上記コードを挿入します。
2.次にオレンジ色矢印部分のSend 送信ボタンを押します。
3.緑色の矢印部分のEntity エンティティの部分に出力された部分を、コピーして、ワードプレス上の投稿記事欄に貼り付けて完了です！
4.上記のWEB上で行える簡単な変換ソフトは、インストールの必要はありません。
簡単な操作で、ソースコード（ショートコード）を、ブログ上に記載し読者の方に、コピーペーストで使用を勧める場合などに活用できます！
