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

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

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

【ワードプレスのカスタムフィールドの正体】

WordPressの基礎知識

f:id:wp-lesson:20170223153629j:plain

ワードプレスで投稿や固定ページやカテゴリーに
独自のデータを追加できるカスタムフィールド。
 
その正体は、
データベースの wp_postmeta テーブルです。
 
このテーブルには、どのページのデータなのかを
表すページIDが付いているので、ワードプレス
投稿や固定ページと紐づけてテンプレートの中に
取得することができるようになっています。
 
『記事:カスタムフィールド=1:複数』
 
の関係にあります。
 
このようにテーブル同士の関係を図で表したものを
システム用語でER図(Entity-Relationship Diagram)
と呼びます。
 
添付はワードプレスの公式リファレンス(CODEX)
のデータベースの説明ページ
データベース構造 - WordPress Codex 日本語版
に載っているER図です。
 
ワードプレスには、データベースに保存されている
データを取り出すための専用の命令(メソッド)が
用意されているので、それらをテンプレートの中に
組み込めば、管理画面で登録したあらゆるデータを
自由に表示させることが可能になります。
 
そのためにデータベースの知識が役に立ちます。

PR

CODEMYのマンツーマンレッスンでは、
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
 
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
 
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
 
『ホームページ作成のツボとコツがゼッタイにわかる本』
定価: 2,400円(税別)出版社:秀和システム
 
Amazon購入ページはこちら
http://amzn.to/2bXJkbs
 
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
 
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
 
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
実習と添削でHTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓動画講座を無料体験してください
http://bit.ly/2hw7mIy

【カスタムフィールドの正体】

WordPressの基礎知識

f:id:wp-lesson:20170223153629j:plain

ワードプレスで投稿や固定ページやカテゴリーに
独自のデータを追加できるカスタムフィールド。
 
その正体は、
データベースの wp_postmeta テーブルです。
 
このテーブルには、どのページのデータなのかを
表すページIDが付いているので、ワードプレス
投稿や固定ページと紐づけてテンプレートの中に
取得することができるようになっています。
 
『記事:カスタムフィールド=1:複数』
 
の関係にあります。
 
このようにテーブル同士の関係を図で表したものを
システム用語でER図(Entity-Relationship Diagram)
と呼びます。
 
添付はワードプレスの公式リファレンス(CODEX)
のデータベースの説明ページに載っているER図です。
 
ワードプレスには、データベースに保存されている
データを取り出すための専用の命令(メソッド)が
用意されているので、それらをテンプレートの中に
組み込めば、管理画面で登録したあらゆるデータを
自由に表示させることが可能になります。
 
そのためにデータベースの知識が役に立ちます。

PR

CODEMYのマンツーマンレッスンでは、
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
 
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
 
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
 
『ホームページ作成のツボとコツがゼッタイにわかる本』
定価: 2,400円(税別)出版社:秀和システム
 
Amazon購入ページはこちら
http://amzn.to/2bXJkbs
 
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
 
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
 
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
HTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓動画講座を無料体験してください
http://bit.ly/2hw7mIy

【jQueryを最速でマスターするコツ】

サイト制作スキルを伸ばしたい方へ

f:id:wp-lesson:20170223111542p:plain

jQueryjavascriptを拡張したようなものなので、
オリジナルのjavascriptには無いメソッドや構文が
たくさん用意されています。
 
「覚えるのメンドクサイ」
「新しいこと勉強する時間がない」

 
という理由で避けてきた方も多いのではないでしょうか?
 
私もそう思います(笑)。
 
新しいことを覚えるのは苦手ですし、
一度に多くのことを記憶することができません。
 
そんな私ですが、プログラマー/コーダーとして
制作やレッスンをさせていただけているのは、
 
「暗記ではなく、動作の仕組みを理解すること」
 
にフォーカスしているからです。
 
jQueryには、非同期通信(ajax)のように
サーバーを跨ったデータ通信を行う機能もありますが、
 
デザインを表示させることを主体とした通常の
サイトでは、表示上のエフェクトを実現するために
使われることが大部分だと思います。
 
そこで行われるのは、基本的にたった2つです。
 
1.HTMLを動的に切り替える(変更する)
2.CSSを動的に切り替える(変更する)

 
ですから、HTMLとCSSを必要に応じてネットで
サッと調べて書けるレベルまで習得してしまえば、
新しく覚えることを極限まで少なくできるのです。
 
これがjQueryを最速で実用レベルまでマスターする
コツだと私は実感しています。
 
 
「でもjQueryのメソッドは覚えないとダメなんでしょ?」
 
 
いいえ、メソッドの一覧が用例付きで載っている
リファレンスサイトをサッと開いて、
目的の動作をするメソッドと使い方を読むだけです。
 
↓初心者にわかりやすい日本語リファレンスサイト
www.jquerystudy.info

分からないことはほとんどネットに載っているという
前提で、検索する習慣さえ付いていれば、
新たに覚えるという努力をほとんど意識することなく
新たな経験をしていくので、
 
意識しなくても自然にスキルが上がっていきます。

PR

CODEMYのマンツーマンレッスンでは、
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
 
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
 
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
 
『ホームページ作成のツボとコツがゼッタイにわかる本』
定価: 2,400円(税別)出版社:秀和システム
 
Amazon購入ページはこちら
http://amzn.to/2bXJkbs
 
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
 
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
 
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
実習と添削でHTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓動画講座を無料体験してください
http://bit.ly/2hw7mIy

【jQueryを使ったエフェクトの正体】

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

f:id:wp-lesson:20170223110943j:plain

昨晩、WebデザイナーさんとjQueryのレッスンでした。
 
レスポンシブなサイトによくある、スマホメニューを
開いたり閉じたりする動作をjQueryで作成しました。
 
ボタンをタップするとメニューがふわっと表示され、
もう一度タップするとふわっと消えていくメニューです。
 
いわゆる「フェードイン」「フェードアウト」です。
 
jQueryを使えば、
 

↓フェードイン
$('.nav-toggle').fadeIn();
 
↓フェードアウト
$('.nav-toggle').fadeOut();

 
のように、これ以上ないというぐらい直感的にわかる
メソッド名を使って1行で書けてしまうのですが、
 
ディベロッパーツールで動作の様子を見てみると、
これらのメソッドの正体がわかります。
 
例えば fadeIn() は、デフォルトでは 400ミリ秒かけて
CSSのopacityプロパティを0⇒1へ連続的に変化させ、
変化が終わると同時に displayプロパティをblockに
切り替える動作をします。
 
逆に fadeOut() は、opacity を1⇒0へ連続的に変化させ、
変化が終わると同時に display を none に切り替える
動作をします。
 
ちなみに opacity は透明度を表すスタイルです。
displayは表示方法を表すスタイルで、block にすると
縦横の幅を持ったブロック要素として表示され、
noneにすると表示が消えます。
 
このことから何がわかるかというと、
たった1行唱えるだけでエフェクトが簡単に作れてしまうjQueryの正体は、
Javascriptを使ってCSSを連続的に変化させているだけだということです。
意味の分からない魔法のコードではありません。

昔から変わっていないHTMLとCSSの基本的な操作が、
1つの短いメソッドの中にあらかじめ組み込まれているだけなのです。

 
この本質が理解できていれば、
 
「ここはjQueryを使ったら楽に作れそうだな」
「ここはjQueryを使わなくてもCSSでいけそうだな」
 
といった、サイト制作やカスタマイズをするときの判断が
自分でできるようになり、自由度が広がります。
 
 

PR

CODEMYのマンツーマンレッスンでは、
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
 
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
 
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
 
『ホームページ作成のツボとコツがゼッタイにわかる本』
定価: 2,400円(税別)出版社:秀和システム
 
Amazon購入ページはこちら
http://amzn.to/2bXJkbs
 
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
 
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
 
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
実習と添削でHTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓動画講座を無料体験してください
http://bit.ly/2hw7mIy

【ワードプレスのスラッグは日本語NG】

WordPress/プログラミングレッスン WordPressの基礎知識

f:id:wp-lesson:20170221144323j:plain

ワードプレスのページやカテゴリーにはスラッグという
ものがあり、公開ページのURL末尾に自動で付きます。
 
例)「日本語のスラッグ」というスラッグのページ
 
http://xxxx.com/日本語のスラッグ
 
ブログサイトなどでよく見かけますよね?
 
ワードプレス自分でスラッグを入力しない場合、
記事のタイトルがスラッグにコピーされるので、
スラッグを意識したことがない方も多いのでは
ないでしょうか?
 
また、テーマによっては body タグの id や class に
スラッグを埋め込むようになっている場合もあります。
 
例)

<body id="ここにスラッグ">

 
もしスラッグが日本語だと、HTMLに変換される際の
エンコード処理によって文字化けしてしまうので、
スタイルシートで使えない形になってしまいます。
 
ワードプレスの制作において、スラッグは
 
『このページの場合はこうしたい』
『このカテゴリーの場合はこうしたい』
 
というように、デザインやレイアウトを条件分けする
目的で読み取ることが多いので、日本語はご法度です。
 
例)「日本語のスラッグ」⇒「japanese-slug」
 
こうすれば、
 
http://xxxx.com/japanese-slug

<body id="japanese-slug">

のようになるので、スタイルシート
 

/* サイト全体のコンテンツ幅 */
.container { width: 980px; }

/* 特定のページだけコンテンツ幅を変える */
#japanese-slug .container { width: 100%; }

 
といったピンポイントな振り分けが可能になります。

PR

CODEMYのマンツーマンレッスンでは、
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
 
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
 
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
 
『ホームページ作成のツボとコツがゼッタイにわかる本』
定価: 2,400円(税別)出版社:秀和システム
 
Amazon購入ページはこちら
http://amzn.to/2bXJkbs
 
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
 
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
 
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
実習と添削でHTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓動画講座を無料体験してください
http://bit.ly/2hw7mIy