webってウェブ?それともウェッブ?

webの技術について、紹介解説するためにはじめてみました。

WordPress(ワードプレス)自分のテーマをつくる【番外編001】カテゴリ情報の取得

WordPressが用意してくれている関数
get_the_category
を使います。

詳細ページを管理するファイル、
single.php
内で使用する場合は下記。

<?php
get_the_category();
?>

その他、ループ内等で使用する場合は引数に投稿IDを入れます。
例えば記事番号6のカテゴリ情報が欲しい場合は

<?php
get_the_category(6);
?>

となりますね。

でもって、情報が配列で返ってくるので
更に取得したい情報を引っ張り出します。

ちょっと配列の中を見てみましょう。

<?php
print_r(get_the_category());
?>
Array
(
    [0] => WP_Term Object
        (
            [term_id] => 3
            [name] => Linux
            [slug] => linux
            [term_group] => 0
            [term_taxonomy_id] => 3
            [taxonomy] => category
            [description] => 
            [parent] => 0
            [count] => 1
            [filter] => raw
            [object_id] => 9
            [cat_ID] => 3
            [category_count] => 1
            [category_description] => 
            [cat_name] => Linux
            [category_nicename] => linux
            [category_parent] => 0
        )

)

たくさん入ってますね。

で、例えばカテゴリ名を取得したい場合は「name」ってとこに入っているので

<?php
echo get_the_category()[0]->name;
?>

こうなります。

WordPress(ワードプレス)自分のテーマをつくる【第2-1回】記事詳細ページのしくみ

記事詳細ページのしくみを作ってみます。

先ずはなにか適当な記事を投稿します。

パーマリンクが生成されますのでアクセスしてみましょう。

f:id:witheit:20160604172928p:plain

はい、なにも表示されませんね(笑)

WordPressにおいて記事の詳細ページは、

single.php

で処理されるよう構築されています。

このファイルがテーマディレクトリに存在しないため、なにも表示されないということです。


single.phpで詳細ページの処理を構築する


(1) single.phpをつくる


難しそうなこと言ってますが、単純に詳細ページを表示出来るようにするだけです。

先ずこのsingle.phpがなくては始まらないので、つくります。で、エディタで開きます。
なにか適当なテキストを記述してもう一度先程のパーマリンクにアクセスしてみましょう。

どうでしょうか??表示されましたよね??

こんな感じです


(2) 記事の情報を取得して表示する


またまた難しそうですが、やってみると意外と簡単です。

WordPressにおいて記事情報は

$post

このグローバル変数に入ってます。
試しに先程作ったsingle.phpに次のコードを書いて、
もう一度アクセスしてみてください。

<?php

print_r($post);

?>

恐らく文字がごちゃっと(笑)でてくると思います。
こんな感じ↓

f:id:witheit:20160604174334p:plain

少し見やすくするために、ソースの閲覧で見てみましょう。
使ってるブラウザの「ソースを表示」みたいなものを実行してみてください。
すると階層状態のものが確認できます。
こんな感じ↓

f:id:witheit:20160604174530p:plain

見やすくなりましたね!!
既にこのページには、これだけの情報が降りてきているということです。

(3) 取得されている情報を表示する

上記の方法だとあまりにも見づらいので、ちゃんとhtmlタグ内に落とし込んでいきます。

では、取得する内容を決めましょう。

  • タイトル
  • 投稿日時
  • 本文
  • カテゴリ

こんなところでしょうか。

次に先程の取得情報をもう一度見返してみましょう。
この取得したい情報が$postのどこに格納されているかが分かりますね。
試しにタイトルを取得して表示してみましょう。

タイトルは$postの中のpost_titleに格納されているので

<?php

echo $post->post_title;

?>

このようになります。
htmlのタグと一緒に使うとなると、

<h1><?php echo $post->post_title; ?></h1>

こんな感じです。
他の取得したい情報も同様に取得して、任意のhtmlタグ内に展開します。

記事が属しているカテゴリの情報だけは、
$post内には無いので別の方法で取得しますが、それはまた別の記事で説明することにします。

ではまた。

WordPress(ワードプレス)自分のテーマをつくる【第1回】事前準備

テーマディレクトリを作成する

長く利用することを考えるとWordPressの構造はシンプルにすべきです。
なので、不要なファイルは全て捨てます。

先ず、自分用のテーマフォルダを作成します。
テーマフォルダは下記です。

WordPressを格納しているディレクトリ/wp-content/themes

私のテーマフォルダには下記3つのテーマが入っていました。

  • twentyfifteen
  • twentyfourteen
  • twentysixteen

管理画面で確認してみましょう。
管理画面メニューの
外観→テーマ
から確認できます。

f:id:witheit:20160528143632p:plain


それでは下記ディレクトリに自分のテーマディレクトリをつくりましょう。

WordPressを格納しているディレクトリ/wp-content/themes

ディレクトリ名は自分の好きな名前をつけてください。

テーマ名の命名

作成したディレクトリの中に

を作成します。
そして、このstyleの中に下記記述を追加します。

/*
Theme Name: 自分の好きなテーマ名
*/

これがテーマ名となります。

それでは、もう一度管理画面からテーマを確認して見ましょう。

f:id:witheit:20160528144302p:plain

はい。作成したテーマが増えてますね??
私は「it」という名前にしてみました。
これを有効化します。

他のテーマはもう必要ないので削除します。

これで準備は完了です。
次に、記事一覧と記事詳細ページを作っていきます。

AfterEffects【ショートカットキー】タイムライン上の現在位置を特定の時間位置へ移動する【mac】

タイムライン上を特定の時間位置へ移動する

これいつも忘れる上に、検索ワードになんて入れるかいつも悩むのでもうここに書いておこう!!
と思います。

Shiftキー + Optionキー + j

です。

まぁ、これだけだと何なので少し今回のショートカットに付随する
裏ワザを書いておきましょう。

タイムラインの現在地を秒数指定で進めたり戻したりする方法


今いる位置から
〇〇秒後とか〇〇フレーム後に進めたい
〇〇秒前とか〇〇フレーム前と戻りたい
そんなやつです。

上記のショートカットで出てきたダイアログボックスに対して指定します。
これね、「後」はなんとなく直感的なんですよ。でも「前」がチョットひねりがいります。

まずは〇〇秒後とか〇〇フレーム後。
例として10フレーム後

+10

ダイアログボックスに入力します。
まぁ、なんとなく「はい、はい」って感じじゃないですか(笑)

つぎに
まずは〇〇秒前とか〇〇フレーム前。
例として10フレーム前

+-10

こうなんです。

ね!

一瞬「-10」かと思うじゃないですか??

そんな感じです。

ホームページをつくる【第5-3回】ドキュメントルートにhtmlファイルを設置する-FTPソフトでファイルのアップロード

FTPソフトで作ったhtmlファイルをサーバーへアップロードします。

ではいよいよhtmlファイルをサーバーに設置します。

サーバーへのアップロードには一般的に「FTPソフト」というものを利用します。
FTPソフト」、正確には「FTPクライアントソフト」と言いまが、
まぁ難しいことを考えると面倒臭いので、先ずはこのFTPソフトを手に入れましょう。

これも、フリーで様々なものがありますのでそちらを利用するのもいいでしょう。

私のおすすめは、有料なのですがtransmit(トランスミット)です。

色々と使ってみましたが今まででダントツです。
Finder(ファインダー)とほぼ同じ要領で利用できます。賢いです。

先ずは接続の設定をします。FTPソフトによって名称は様々ですが、
言ってることは一緒です。

トランスミットではこんな接続画面です。
f:id:witheit:20160501220033p:plain

絶対に必要な情報は下記3つ

  • 接続先サーバー
  • ユーザー名
  • パスワード

これさえあればサーバーに接続できます。

ドキュメントルートにファイルをアップロード


接続に成功すると接続した先が表示されるはずですが、
ここで注意しなければいけないのが、接続された先が「ドキュメントルート」かどうかです。

基本、作成したhtmlファイルは「ドキュメントルート(Document Root)」に設置しなくてはいけません。

恐らく契約したサーバー会社からの情報にあるとおもいますが、
FTPソフトで接続した初期ディレクトリがドキュメントルートでは無い場合があります。

ドキュメントルートが分かったらそこにアップロードしましょう!

上記のトランスミットの場合は、ドラッグアンドドロップだけ。簡単ですね。

アップロードできたらWEBブラウザでアクセスしてみましょう。
ブラウザにindex.htmlの内容が表示されていればOKです。

ドキュメントルート


ところで、ドキュメントルート。。何でしょうか、簡単に言うと。。

うーん。。難しいですねぇ。

サーバーってホームページのためだけにあるわけじゃないんです。

いままでの話だけでもFTPソフトとWEBブラウザの2つからアクセスされてますよね?
でもって、その2つとも用途が違うわけですよ。

WEBブラウザはhtml関連ファイルの閲覧用、FTPはファル転送用...

こんな感じでサーバーは様々なアクセスを受け付けます。
そしてそのアクセスによって用途は様々です。

サーバーの中身は皆さんが使用しているパソコンと一緒で
ディレクトリ(フォルダ)群とその中にあるファイル群で構成されています。

このディレクトリを「部屋」・アクセスを「来客」に例えます。ちょっと無理がありますが。。
で、「来客者」によって通す部屋を振り分けているって感じです。
FTPさんはこっちの部屋〜」「WEBブラウザさんはこっちの部屋〜」みたいな感じかなぁ。
このWEBブラウザさんのアクセス時に通される部屋が「ドキュメントルート」です。

なのでその「WEBブラウザさんはこっちの部屋〜」にhtmlファイルを置く必要があります。

んーーー。分かりにくいか。。今度図を書こう(T_T)

ではまた。

ホームページをつくる【第5-2回】ドキュメントルートにhtmlファイルを設置する-htmlファイルの作成方法

それではhtmlファイルを作成してみます。

これはもうウルトラ簡単です。

適当なテキストエディタ

This is index file

とでも書いてindex.htmlという名前を付けて保存します。

Windowsならメモ帳、macならリッチテキストなどがデフォルトでインストールされていますが、
最近ではフリーの専用エディタの性能が物凄く良いのでそちらを使用するのも良いです。

私はmac利用者なので最近のWindows事情には疎いのですが、
mac用であれば下記があります。

無料のもので

有料のもので

有料だから良い、無料だからダメといった具合に行かないことに顕著なのが
ITの世界です(笑)。あまりエディタに依存せず、それぞれの良い所を理解して使用する事が大事です。

というか、htmlの内容が複雑になるとやはりデフォルトのエディタでは使いにくいので
何れは専用のエディタに変更したほうが良いでしょう。

エディタの詳しい話はまたどこかで。

次にFTPソフトで作ったhtmlファイルをサーバーへアップロードしましょう。

ではまた。

ホームページをつくる【第5-1回】ドキュメントルートにhtmlファイルを設置する-手順

今回は実際にhtmlファイルを作ってブラウザで表示させてみます。

前回はDNSを利用してドメインとサーバーを紐付けたわけですが、
無事にDNSが世界中に浸透し、ドメインとサーバーが紐付いたかどうかを調べるには
そのドメインにアクセスしてみるのが一番です。

では、アクセスした時にどうなっていたら正解なのでしょうか。。??

正解は、

ドキュメントルートに設置したインデックスファイルが表示されていれば正解

です。

まぁ、なんのこっちゃって感じですが。
超簡単に説明すると

適当な内容(なんでも良いですが英語がいいかな)を書いたindex.htmlっていうファイルをサーバーにアップロードして、
その後WEBブラウザ(chromeとかfirefoxとか)でアクセスしてその適当な内容が表示されたらOK!!

わかります?
手順から説明しますと

  • index.htmlを作成
  • 適当なFTPソフトでサーバーに接続
  • ドキュメントルートにindex.htmlをアップロード

って感じです。

先ずindex.htmlの作成から

ではまた。