読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【HTMLの知識ゼロでもWordpressに設置できるブログパーツ】

サイト制作スキルを伸ばしたい方へ WordPress/プログラミングレッスン WordPressの基礎知識

f:id:wp-lesson:20151122215557p:plain
ボタンをクリックすると大吉や中吉といった結果が、
画像と文章で表示され、さらにその下には合わせて
読んでもらいたい関連記事へのリンクが自動的に
表示されるブログパーツです。

いわゆる「おみくじスクリプト」と呼ばれるもので、
ネット上には javascript 製のコードスニペット
たくさん落ちています。

しかし、それらのほとんどは javascript の乱数と
DOMによるHTMLの動的生成を利用しただけのサンプル
プログラムが多く、何よりもjavascript のコードは
ブラウザの「ソースを開く」でユーザーに見えます。

「ランダムに適当に表示しているだけか・・・」

と、一発でバレてしまいます。

javascriptはクライアントサイドで動くスクリプト
なので、ブラウザにありのままダウンロードさせる
必要があります。

だから種明かししているのも同然なんです。

一方、phpのようなサーバーサイドで動くスクリプトなら、
プログラムの内部的な動きはブラウザに返されず、
プログラムを実行した結果としてのHTMLだけが返されます。

だから、どんな仕組みで抽選されたのか、ユーザーには
わかりません。

HTMLの知識ゼロで使えるパーツをショートコードで実現

・ボタンの画像
・抽選確率の設定
・表示される画像と文章
・関連記事のリンク先

など、このブログパーツを使う人がいつでも簡単に設定変更
できる仕組みをWordpressの設定ページにしました。

なおかつ、設定ページに登録した内容をショートコードと
連携させることで、ブログを書く人は投稿ページで

[omikuji]

と書くだけで、占いプログラム付きのバナーに置き換わります。

要したプログラムコードは550行

f:id:wp-lesson:20151122220710p:plain
▲オリジナルの設定メニューを追加

f:id:wp-lesson:20151122220759p:plain
▲ショートコードの本体部分

f:id:wp-lesson:20151122220821p:plain
▲ショートコード内に隠蔽した占いプログラムのロジック

f:id:wp-lesson:20151122220907p:plain
▲加工済みのHTMLを返すショートコードの最終部分

ざっと550行ぐらいのPHPコードです。

ここまで作り込めば、ユーザーはたった数文字

[omikuji]

と書くだけで済むようになります。

こんな方におすすめのマンツーマンレッスンを行っています
  1. ネットからコピペする以上のことができない方
  2. 仕組みが分からないままコピペしているので自分でカスタマイズできない方
  3. サイト制作の技術面でサポート(相談)を希望されている方
  4. ホームページの制作経験はあるけれど思うようにカスタマイズできない方
  5. Wordpressの苦手意識を克服したい方
  6. スマホサイト特有の作り方がわからない方
  7. HTMLはある程度分っているつもりだけれど仕事で行き詰ってしまう方
  8. ホームページ制作ソフトに頼ってきたため何も見ずにHTMLを手書きできない方
  9. Webのプログラミングに興味がある方
  10. 自分でサイトを作れるようになりたい方
無料相談だけでも受けてみたい方へ

HTMLやCSSの基礎、ホームページの制作やカスタマイズでお困りの方はお気軽にご相談ください。

oshierumanaberu.net

↑ページの中ほどにあるオレンジ色の「先生に聞いてみる」というボタンを押すと、メッセージが入力できますので、お気軽にご相談ください。

ご相談のメッセージをいただきましたら24時間以内にお返事を差し上げます。より詳しい状況をお聞かせいただける方には1時間ほどですがスカイプで無料相談を承りますので、ご遠慮なくお尋ねください。