WordPressのブログ上で、ソースコードを表示して、読者の方々に作業工程を表示したいことがあります。

ソースコードをペイントなどで貼り付けると、読者の方がソースコードを使用できなくなってしまいます。

また、ソースコードを表示するにはプラグインのインストールおよび、function.phpの加工など様々です。

今日、記載するのは、ワードプレス上のブログにソースコードを記載することが比較的少ない場合、かつ、プラグインやfunction.phpの加工を必要としない、簡易な、ソースコードの表示方法を記載します!

WordPressにソースコードを記載する利点!

ブログの読者に、伝達したいソースコードがあっても、ペイントなどで加工した場合は、ブログの読者がそのままコピーペーストで使用できないという問題点があります。

そこで、今日は、即、ブログの上に記載してあるソースコードをそのままコピーペーストして使用できるタイプを記載します

ソースコードの表示にプラグインやfunction.phpの加工を必要としない方法!

下記にURLを貼り付けました。メリットとデメリット双方併記します。

メリット

プラグインのインストールやfunction.phpなどの加工を伴わないという点は、最大のメリットです。

導入に伴う時間やブログが重くなることについて回避できます。

長いソースコードでも、瞬間的にブログ上に記載できる文体に変換してくれます!

無料(ゼロ円)で使用できる点が最高です!

デメリット

ソースコードをブログに表示する回数が少ない場合は、良いのですが、変換数が多い場合は、やはり、プラグインやfunction.phpの加工の方が、絶対使用しやすいです!

WordPress上で、ソースコードを表示する方法(プラグインを使用しない方法)

ソースコードをワードプレス上で、適正に表示するにはプラグインなどの方法がありますが、頻繁にソースコードの表示を行わないならば、以下のソースコードの変換ソフトを使用しても十分OKだと思います!

以下、記載する変換ソフトは、インストールの必要がなく、WEB上で瞬時に、かつ、簡単にソースコード(ショートコード)を変換してくれます!

今回は、下記のURLの変換ソフトを使用します。

WordPress上で使用するソースコードを作成例!

下記のソースコードは、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上で使用するソースコードにSEOを使った作成例!

1.まず、下記画像のように、下記のソースコードをコピーペーストします。

<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上で行える簡単な変換ソフトは、インストールの必要はありません。

簡単な操作で、ソースコード(ショートコード)を、ブログ上に記載し読者の方に、コピーペーストで使用を勧める場合などに活用できます!

ユーチューブのコードを活用して、ソースコード(ショートコード)を、表示する記事を書きました!

ワードプレスにyoutubeを入れても重くならない(プラグインなし)!ご覧ください!

様々な資格学習が980円でウケホーダイ!【オンスク.JP】