wordpressのテーマを作るよ

メモ用。

色々配置ルール

以下を前提に、HTML+CSS制作→wordpressテーマへの実装を。

WordPress オリジナルテーマの作り方 3.0+

qiitaにも大変お世話になった。
https://qiita.com/kazukichi/items/5126a4fd259d374e99ae

まず前提として、さすがの高橋のりさん。

CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-index とかいろいろ


参考:CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-index とかいろいろ

固定ヘッダ

・fixedを包含ブロックに。【z-index】は、常に最前列に固定メニューを配置するため。

【CSS】固定ヘッダーとか作った時に役立つ「z-index」指定して最前面に


参考:【CSS】固定ヘッダーとか作った時に役立つ「z-index」指定して最前面に

・子ブロックで幅と、ブロック全体を画面に対して中央にそろえています。
・子ブロック内でのメニュー右寄せは、メニューのcssに記載。

div#header-fixed{
position: fixed;
z-index: 9999;
top: 0px;
left: 0px;
width: 100%;
height:70px;
}

div#header-bk{
width:93%;
margin: 30px auto;
height:70px;
padding:0;
}

画面に対して縦幅比率を揃える

CSS のみで高さを可変にして要素の比率を維持するテクニック


参考:CSS のみで高さを可変にして要素の比率を維持するテクニック
超便利!!

背景画像のサイズ指定、上下左右配置

サイズはwidthに引っ張られてる感じ。heightを指定しない場合は、上にのってるブロックの高さに切り取られる。
この方法だと一点問題だったのが、heightを指定しなくてはいけないがゆえに、画面の幅を変えた時に高さを自由に変化させられないこと。そこで上の高さ可変テクを利用。

.billboardback { width:100% ; height:500px;
background-image:url(お好み.jpg) ;
background-repeat:no-repeat ;
background-position:top right ;
background-size:70% ;
}

flexboxによるリスト表示

Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用


参考:Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用
まずはこれをコピペで、試しにflexboxを使ってみる。

【Flexbox】幅・伸縮率を指定するflexboxのプロパティ


参考:【Flexbox】幅・伸縮率を指定するflexboxのプロパティ

css3のflexboxを使うとすごい簡単になるレイアウトを試してみた


参考:css3のflexboxを使うとすごい簡単になるレイアウトを試してみた
flexboxを用いた、各種レイアウトの参考例に。

日本語対応!CSS Flexboxのチートシートを作ったので配布します


日本語対応!CSS Flexboxのチートシートを作ったので配布します

https://qiita.com/junara/items/dd9f34a4f2baccf58b89
(個人的まとめ)よく使うflexboxの設定

★flexboxで最下段が変になる問題。
→「flexbox 最下段 左寄せ」で色々出てくる。
floatとflexboxのハザマで揺れ動く…。
とはいえやはりflexboxの扱いやすさは光る。
flexのflexstartで幅を調節するか、後ろに疑似コンテナを作るか、どちらかという感じか。

http://blog.webcreativepark.net/2016/08/15-125202.html

https://keitahirai.net/archives/694

https://qiita.com/QUANON/items/e14949abab3711ca8646
Flexbox で全体を中央に配置しつつ最後の行を左揃えにする

ハンバーガーメニュー

CSSで実装するハンバーガーメニュークリック時のエフェクト 10+


参考:CSSで実装するハンバーガーメニュークリック時のエフェクト 10+

ひたすらハンバーガーアイコンを作ったので9種のソースを公開します!


参考:ひたすらハンバーガーアイコンを作ったので9種のソースを公開します!

フェードイン表示

WordPressに【jQuery Image Lazy Load WP 】をインストールしてスクロールに併せて画像を表示

http://skill-stock.hokoweb.com/skill/31/

HTML、CSSチェック

http://www.htmllint.net/html-lint/htmllint.html

wordpressテーマへの変換

ループ回数制御

WordPressで最新記事をループで5件表示する方法

抜粋文制御

WordPressで記事本文を抜粋表示する文字数と文末の[…]を変更する方法

WordPressで抜粋の文字数や文末文字を変更する方法

カスタム投稿タイプループ制御
https://hirashimatakumi.com/blog/18.html

wordpress側のもろもろカスタマイズ

カスタム投稿タイプ
https://techacademy.jp/magazine/2842

固定ページ用テンプレートの作成

固定ページを作成する[page.php][カスタムテンプレート]


→作りたいページ.phpをつくった上で固定ページからテンプレ選択することで、そのページを作成することが可能。

http://d.hatena.ne.jp/seiginohiiro/20120317/1331969046
固定ページの本文を取得するには

カスタム投稿タイプ別にレイアウトや記事ページに出す情報を分岐させたい
→single.php内にif分岐をつくり、別phpテンプレートをつくる。

http://notnil-creative.com/blog/archives/1288
wp_queryについて知る

カテゴリ一覧の作成
ループ表示におけるページごとの「前・次」生成

その他

前へ次へ問題。

http://nabokov.blog.jp/archives/722481.html

https://www.google.co.jp/amp/s/webnaut.jp/others/513.html/amp/

jqueryって何

はじめてのjquery…。

jQueryってなに?超初心者向け入門講座

https://techacademy.jp/magazine/9444
今さら聞けない!jQueryとは【初心者向け】

wordpressでjqueryを使う時の推奨方法まとめ


wordpressでjqueryを使う時の推奨方法まとめ

jQueryのことがよくわからなかったので、ちょっと勉強…。
・jQueryとは、javascriptを簡単に記載できるようにしたライブラリ。要するに「javascriptでできることまとめ」。
・googleなどのCDNから配信されている。(色々なところから配信されているが、全て同じもの?)
それをHTML上で読み込んで使うのが普通。
・wordpress自体に既にjqueryが同梱されている。(CDNを使えば、常にバージョンアップできるメリット。)
そのため、functionにwp_headで適切にjqueryを読み込むように記載しておく。

ふわっと表示

http://kyasper.com/jquery-tips/
ページ内リンクのスムーススクロール

http://skill-stock.hokoweb.com/skill/31/
要素をふわっと表示

[JS]jQuery の fadeIn() でページ読込み時にフェードインで要素を表示する


ページ全体をふわっと表示

https://daneden.github.io/animate.css/
参考:いろんなアニメーション

WordPressが捗る!超オススメjQueryプラグインまとめ12選


jquery参考

 

スポンサーリンク

ご紹介

こんにちは、森一貴です。東京でコンサル経験後に福井県に移住。教育・まちづくりの分野で活動しています。ブログでは、教育・まちづくり・生き方などについて思索を書き溜めています。ご依頼等、お気軽にお声がけ下さい。


■ 教育:たのしい社会を創る「ハルキャンパス」
生徒の自立・思考・実践を通じて、たのしい社会を自ら創る力を育てます。ハルキャンパスのウェブサイト・facebookページが公開されました。もうすぐ春期講習も始まります。ぜひチェックを!
ハルキャンパスfacebookページ ハルキャンパスウェブサイト


■まちづくり:イベント・講座の実行支援や自主企画に取り組んでます
移住者として鯖江市「ゆるい移住」に参加し、現在は鯖江市の職人工房開放イベント「RENEW」の企画・実行支援を手がけています。他にもいくつか、新しい取り組みを形にすべく活動しています。

■ブログ:教育・まちづくり・生き方を中心に、ブログを書いてます。
主な記事は以下。
やりたいことなんかないけど、しあわせでいたい人の話」
東大でまちづくりを学んだけれど「まちづくり」が嫌いな私の思う「まちづくりの違和感」

将来に悩むみなさんへ

就活生の方や、転職活動をしている方、あるいはそうでなくとも、日々にもやもやとした思いを抱えているみなさんに、きっと役に立つだろう記事をピックアップしました。少しでも、みなさんのお役に立てたら幸せです。

やりたいことなんかないけど、しあわせでいたい人の話」
あなたに読んでほしい。「問題意識」と「やりたいこと」を切り離してほしいという、大事な記事です。
東大に入ればなんでもできると思っていたかつての私に向けて(外部サイト)

投稿者:

森 一貴

山形県出身、東京大学教養学部卒。コンサルティング企業にて勤務後、鯖江市ゆるい移住に参加。現在、考える力を伝えるプロジェクト「CUE」代表。