cssだけでモーダルウィンドウを作る

こんにちは

金欠です、コーディングのお仕事ください。
今日はcssだけでモーダルウィンドウを作ります。
モーダルウィンドウにjsを使うのはカスです。

作っていく

とりあえず作っていこうと思います。
まずいい感じにボタンを設置したページを作っておきます。


1.モーダルを作る

早速モーダルを作っていきます。
今回は背景を薄暗くして白いモーダルウィンドウを浮き上がらせるようにします。
idをmodal,classをmodal-panelとします。


2.モーダルを開く

先程作ったモーダルは当然のように閉じることも開くこともできません。
ですが、:targetという擬似クラスを使えばモーダルの開閉を行うことができます。
一番最初のモーダルを開くというボタンのhrefをモーダルのid(#modal)にしておきます

そして、擬似クラス:not:targetを使って「ターゲットされていないときはモーダルを隠す」「ターゲットされているときは表示する」という処理をcssに書きます。

これだけ。
これでボタンを押したらモーダルが開くようになりました。

モーダルを閉じる

今のままだとモーダルを閉じることができません。
なので次はモーダルを閉じるボタンを作っていきたいと思います。
先程「ターゲットされていないときはモーダルを隠す」という処理を書いたので、aタグで強制的にターゲットを外してやれば良いわけです。
コードとしてはこんな感じ

cssの変更は無し。
aタグのhrefを#にすることにより、強制的にターゲットが外されます。
それによりモーダルを閉じることができます。

モーダルをいい感じに出現させる

今のままだと何のアニメーションも付いていないのでただ無機質に開閉するだけです。
ここにアニメーションをつけてもっといい感じにモーダル感を出していきたいと思います。

キーフレームでいい感じにしたやつを、アニメーションを付けたい部分に当てるだけ。
ほら簡単

だいたいこんな感じ

cssだけでまだまだできることはたくさんあります!
皆さんjsを使わない軽いページを作り出していきましょう!

p.s.コーディング等のお仕事をください。
1ページのLPなら1日で仕上げます。
WordPressなら5日で仕上げます。
連絡まってます。

【覚書】WordPressのカテゴリを親->子の順で取る

WordPressのカテゴリは癖が強い

get_the_category()
で取ってきても「親->子」の順番で渡してくれず、何故か名前の順で取ってくる。
引数にオプションを指定したら「親->子」の順番で渡してくれるのかと思いきや全くそんなことは無い。

どうするか

get_the_category()
で取ってきた値がparentという値を持つかどうかを判定してやるしかない。
$categories = get_the_category();
foreach($categories as $category){
if($category->parent != 0){
処理 }else{
処理 }

的な感じで…

結論

WordPressさん、カテゴリの親子関係を作れる仕様があるのだから、いい感じに返してくれるぐらいしてください。

PHPでYoutube API v3を叩いて特定のチャンネルの新着動画を取ってくる

どうも

お久しぶりです、最近はWordPress案件がとても楽しいです。
是非お仕事ください。
そんな中、WordPress案件の中で、特定のチャンネルの新着動画をトップページに並べたいらしく、色々と考えた結果Youtube v3 apiを使うと驚くほど簡単に新着動画を取ってくることに成功したので記事にしたいと思います。

新着動画を取って来たい

はい、もう簡単なので早速やっていきたいと思います。

1.Google Cloud Consoleに行って鍵を取ってくる

まず、Google Cloud ConsoleのAPI Managerに行きます
そしてライブラリでYoutubeを検索して、Youtube Data APIを有効にします。


次に認証情報から認証情報を作成します。
APIキーを選択すると一瞬でキーが出てくるのでメモっておいてください。

2.チャンネルIDを取得する

これは至って簡単です、チャンネルIDが欲しいチャンネルにアクセスして

URLのchannel/以下がチャンネルIDです

3.Youtube v3 APIを叩く

はい、Keyがあればもうすぐ叩けます。
https://www.googleapis.com/youtube/v3/search
が検索APIなので、これに
?part=snippet&channelId={チャンネルID}&maxResults=5&order=date&type=video&key={API Key}
って感じでGETパラメータをつけてブラウザからアクセスしてみると…
maxResults=5
5件取ってくるの意
https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UC5UKWHBT_f5789lAE5Tkd4A&maxResults=5&order=date&type=video&key={API Key}

僕の大好きな鍛道の最新動画のJSONが降ってきます

4.PHPから叩く


function cuGet_contents( $url, $timeout = 15 ){
$ch = curl_init();
curl_setopt( $ch, CURLOPT_URL, $url );
curl_setopt( $ch, CURLOPT_HEADER, false );
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
curl_setopt( $ch, CURLOPT_TIMEOUT, $timeout );
$result = curl_exec( $ch );
curl_close( $ch );

return $result;

}

いい感じでcurl get関数的なものを作って
json_decodeをして

foreach ($array['items'] as $key => $value) {
}

で色々とるって感じです。

小技

Youtube v3 APIで降ってくるthumbnailのURLはオリジナル画像のURLではなく、圧縮されたりしているので画質が悪かったり、勝手にアスペクト比が変えられていたりするので、表示するときは
http://i.ytimg.com/vi/{Video ID}/maxresdefault.jpg
という感じで取得するといいかも

WordPress オリジナルテーマの作り方【まとめ】

はじめに

じろうです、仕事でWordPressのテーマを作ることになったので、色々と調べていると上手くまとまっている記事が無かったので書こうと思います。
個人的にはWordPressのテーマを作る仕事は好きですが(給料が良いため)WordPress自体あまり好きではありません。
そんなことより僕にコーディング案件をください。

1.HTML/CSSでサイトのデザインを作る

続きを読む