「webで何か」作るブログ

35歳という遅すぎるスタートをなんとかする為のブログです。基本的に自分にとっての役立ちメモ。

カスタムメニューの登録と表示”register_nav_menus”|WordPressテーマを作ろう

カスタムメニューの使い方

とりあえず、全開で至極簡単な表示はできたので、今度はWordPress純正のメニューを表示させてみる。

WordPressCodexをみると、流れ的には以下。

カスタムメニューを表示させるまでの流れ

  1. functions.phpでフック?アンカーになる文字列と、管理画面上での名前を決めてメニューを登録。

    カスタムメニュー有効化

  2. その文字列をパラメータに持つwp_nav_menuをテーマに書き込む。

    カスタムメニューを読み込む

    wp_nav_menuを使って、カスタムメニューを表示&任意クラス付与

  3. メニューを作って、表示させたいところにチェックを入れる。

f:id:pochiweb:20170922004016p:plain

注意点

widgetばっかり使ってきて、この方法は初めて。簡単に注意点を書いておく。

  • wp_nav_menu一つに対して一つしかメニューは表示できない。(当然すぎるな)
  • メニュー管理画面では、表示させたい部分に対してチェックボックスのチェックを入れるのだけど、違うメニューを同じところに表示させようとしても特に警告なしで上書きされる。

次はwp_nav_menuの細かいパラメータをCodex見ながら試してみたい。(CSSとかの読み込みはメニューのスタイル当てるときにでも。。)

 

最低限からのWordPressテーマ構築記録を開始

テーマ作成への考え方が変わった

これまでの投稿で、仕様を決めたりファイルを用意したりしていたけれども、ちょっと大きく方向転換をすることにした。

これはWordCampで聞いた

speakerdeck.com

による影響が大きい。

正直なところ、作りたいなと思っていたのはこれと対極にあるカスタムフィールドをガンガン使ったものでした。

しかし、確かにカスタムフィールドを使うということは他のテーマへの移行をし難くするということだし、さらにいってしまえば今後Gutenbergがメインエディタになった時、必要ないじゃん?となる気がしたから。

というわけで、今まで多少作成を進めていたものも一旦まっさらにして、やり直すことにした。Bootstrapも削除して、綺麗さっぱりここからスタートします。

WordPressをとりあえず表示するだけ5点セット

我ながら、どんだけ最初から晒すんだ?!という気がしないでもないけど、自分のための記録半分以上だから、と無理やり納得させての公開ですので、指導は喜んで頂戴します。

header.php

index.php

footer.php

style.css

functions.php

styleの読み込み方法とかが既に推奨の方法でない気がするので、明日はその辺りを調べて調整していこうと思います。

年内完成できるのかな?

 

 

WordCampTokyo2017参加してきた。現状スライドまとめ、来年へ向けた反省など。

WordCampTokyoに参加してきました。日が経って忘れてしまう前に、書き残しておきたい。スライドまとめは最後にありますので、まとめをご覧になりたい方はそちらへ!

 

後悔したこと

のっけから後悔したことを書くってどうなのよーという感じですけども。人は得られたはずの利益を遺失した時、その価値は3倍(確か)に感じるようで、人間の本能であるということで許してください。

個人名刺を作っておきたい

1番の公開はこれ。こういったイベントで会社の名刺、、でもいいのかもしれないけどやっぱりなんだか違和感がある。twitterは会社と完全分離させているし、イベントではtwitterで繋がってる方としか多分会わないので、なおさら。自分を何者にするか?からしっかり考えて作りたい。

バッグ小さかった

ボディバッグで会場に向かいましたが、最初のセッション開始前にもう超パンパンになってしまいまして。

なぜかというと、ノベルティや販促物のことをすっかり忘れていて、色々頂いていたら全然足りなかった、という感じです。

辞書2冊分くらいはあったんじゃないかなあ。

セッション開始と終了の時に、メモを出すのも大変という結構面倒なことになっておりましたww

 

↓頂きものたち。

f:id:pochiweb:20170917104926j:plain

普段お世話になっている各企業のノベルティということもあって、どれもこれも可愛い、かっこいい!と興奮しちゃいました。

懇親会も参加した方がいい

今回、色々とタイミングが悪く、WordCampの懇親会には参加できませんでしたが、それについてはちょっと後悔があります。

というのも、やはりスピーカーのみなさんや、遠方から参加される方はひとまず懇親会に参加されていて、そういった方々と実際にお会いする数少ないチャンスを逃してしまったから。

僕の場合は「SNSだけで繋がっている方々と会う」が今回の目的の一つなので、ちょっと失敗したかな、、と思っています。東京近郊の方であれば、その気になればお会いできるので。

スピーカーの方、プラグイン作者の方、ここでしか会えないかもしれない方がたくさんいるはずです。

会いたい人とは事前に打ち合わせする方が良かった

今回、結果的に5名の方にお会いできたのですが、結構バタバタでちょっと失礼をしてしまったこともありました。。可能なら事前にスケジュール組めてたら良かったなーと。

よかったこと

良かったことはまあみなさん大体同じ様なことになるのかなーと思いますが、書かせて頂きます。

会いたい人に会うことができる

WordCampは一年を通して最も大きなWordPressイベントですし、参加費もとても安いので、非常に多くの人が参加されます。ということは、普段はネット上でしかやりとりしていない人に会うことができる可能性も格段に上がる訳で、実際に多くの方にお会いできました。大規模イベントだからこそですね。

新たな知識を得ることができる

これも当然ですが、今まで持っていなかった考えや具体的手法を取り入れることができます。見積もりに「レビュー」項目を入れるなんてのはものすごく大事で即効性のあることで、これだけで来た甲斐があったな、という感じです。

新たな繋がりが生まれる

僕はWordCampTokyoとは違う懇親会にいって来ましたが、とても魅力的な方々とご一緒できて、大きな刺激をいただくことができましたし、色々と相談させてもらったりして本当に楽しかったです。

来年に向けて

今年、初めてWordCampに参加してみて思ったのは「ただ参加するだけじゃなんか申し訳ないな」ということでした。

これはテーマが「join」だからということは関係なく、例えば宮内さんの熱い思いや、スポンサーの皆様の厚意や、行き届いた会場整備、運営に触れて、自然と湧き起こった感情です。

という訳で。来年はスタッフTシャツを来ているかも。

最後に、現時点で公開されているスライドまとめておきます。公式が発表されるまで、ご利用いただければと思います。

スライドまとめ

speakerdeck.com

speakerdeck.com

speakerdeck.com

speakerdeck.com

speakerdeck.com

speakerdeck.com

www.slideshare.net

www.slideshare.net

www.slideshare.net

補足を含むブログが公開されました。

www.slideshare.net

speakerdeck.com

www.slideshare.net

それでは。

videoタグの再生終了後にposterを表示させる方法

f:id:pochiweb:20170912223430p:plain

posterの再表示で詰まる

HTML5のvideoタグは使い方も簡単ですし、動画がトップにどーんとあるだけで、サイトの印象を一気に変えることができるので重宝しますよね。

再生のループや待機画像(poster)なんかの設定もHTMLだけで完結できて、とても使いやすく出来ています。

そんなvideoタグですが、先日ちょっと詰まってしまったことがありました。

「アクセス時は自動再生して、再生終了したらループはさせないで、posterを表示させて。」

videoタグには色々と便利なイベントが用意されていたので、その方向で調べるも撃沈。結果的には以下の内容で対応しました。

posterが表示されるのは再生されるまで

早速コードを。

HTML

videoタグ再生後、posterを再表示させる

JS

videoタグの再生後にposterの画像を表示させる

 

ずーっと、どうしたらposterを表示できるのか考えていたのですが、ググっても出てこず。ふと、autoplayをオフにしてた時はposterが表示されていたな、と思い出し、上記のような方法に落ち着きました。

HTML上ではautoplayをオンにしておいて、1度目は再生させて、videoタグに用意されているイベントのendedが発生したタイミングでloadメソッドで再読み込み、読み込み終了後、autoplayをオフに。

こうすることで、videoが読み込まれたけど、再生はされない→posterが表示される、という状況を作ることが出来ました。

実はこの方法にたどり着くまで数日を要していたのですが、終わってみれば処理的には何も難しいことはなかったですね(汗)。

しょっちゅう思うことですが、発想を変える、アプローチを変えるっていうのは本当に大事ですね。思考が凝り固まってないか?常に気にした方がいいなあと感じます。

 

さいたまデザインDTP勉強会に参加してきた。

9月2日、ソニックシティで開催されたデザインの勉強会に参加してきた。

saitama.connpass.com

普段デザインを行うこともなく、これまで勉強してきたわけでもなく、更にはまだまだフリーダムな子どもたちを連れて完全エンジョイ勢として参加してきて、正直周りの皆様に失礼&ご迷惑であったのではという気持ちもありますが。

楽しかったなあ。

今回の勉強会で使用するツールは「レイアウトを工作する」という名のとおり、ハサミ、カッター、色鉛筆、定規なんかがメインで、こういう道具に触れること自体がまあ新鮮!

脳の普段使わない場所にじゅわ~っと血が流れる感じがした。

それと、同じテーマで作られた制作物を一度にたくさん見られるのはとても貴重だと思った。

作品を見て、その意図を汲み取る。自分の考えが正解かはもちろん分からないのだけど、「あぁ、そういうことか!」みたいな感覚になると、そしてさらにその思想みたいなものが自分と近しいと、作品を通して理解し合ったような、不思議な感覚になった。大半は根拠のない感覚なんだけど、とても気持ちのいい体験だったなあ。

しかし!

自分のなんというか、ビジュアル面での技量、技術ってもののなさには打ちひしがれました。もっと描けたら。もっときれいに出来たら。と思いながら提出...。

ときには落書きしてみようかな。。

 

We Project 8月の振り返り

久しぶりに充実した一ヶ月

8月が終わった。月が変わったことに気が付くといったら言い過ぎだけれど、そんな余裕もなかったのだろうなあ。とくに5,6、7月は。

とは言え、そんな状態から脱したこともあって充実した一ヶ月を過ごすことが出来た。

知識、技術を増やし、一緒に働く仲間と飲みに行き、先日はWordPressもくもく会にも行けたし、更に明日はデザインのワークショップに参加予定。

自分の場合は何をするにでも広く浅くするのが好きで、読書でも数冊を並行して読むのが好きだったりする。

そんなわけで、今月の勉強内容の節操のない感じはとても自分らしくて好きだ。

器用貧乏は自覚しているけど、器用貧乏も極めればそれなりの価値はあるんではないか、と淡い期待をしてる。

そんなこんなで、8月の記録。

 

Activity Type Duration Percent
     
WordPressテーマ作成 02:45 0.4
PHP学習 26:14 3.5
読書 03:51 0.5
Gitの勉強 04:20 0.6
Python 03:53 0.5
BLOG 06:09 0.8
勉強 03:08 0.4

PHPの勉強

メインに据えてるのはこれ。

パーフェクトPHP (PERFECT SERIES 3)

パーフェクトPHP (PERFECT SERIES 3)

 

電車内では読む部分を、早朝会社についてからはコードを実際に打ち込む部分を、という感じで進めていて、今現在はフレームワーク作成のところ。

正直、あまり理解できていない。多分何周かする必要がある。もしくはオブジェクト指向の勉強が必要かな。

ともあれ、言語仕様を読むことで少し世界が広がった気がする。

Git

 あと、Gitの勉強とPythonの勉強を始めた。

Gitを会社に導入したい。とても。そのためにまずは自分が使い始めること。自分的には先日のエントリーで書いた2箇所が一番わかり易いかな。

pochiweb.hatenablog.com

ひとまず一人でGitHubでadd→commit→pushしまくっている。つぎブランチ。とかマージとかプルリクとか。今月で一通り使えるようになりたい。 

Python

 Pythonはpaizaラーニングが無料で学べるのでそこでとりあえず始めた。まだまだ入門なんだけど、パーフェクトPHPを一周完了したら次は

 

退屈なことはPythonにやらせよう ―ノンプログラマーにもできる自動化処理プログラミング

退屈なことはPythonにやらせよう ―ノンプログラマーにもできる自動化処理プログラミング

 

 

を参考に、日々の業務の効率化を図りたい。

WordPressテーマ制作

超ゆっくり作ってる。今年中に完成させたい。ワイヤーフレームWordPressで出来たらいいなーと思っていて、そんな感じのものを目指してる。

読書

 これ読了した。今の部署は新規部署なので、実はなんでもやり放題なのだけど、その環境を楽しんでいない人もいるのでその人に読ませたい。

起業家のように企業で働く

起業家のように企業で働く

 

 

 これはまだ読み終わってないけど、知識として入れておきたいから。

 積ん読も増えてきたので読む時間を増やしていきたいな。

 

以上!

開発環境の準備|WordPressテーマを作ろう

 

昨日はさいたま市大宮駅のコワーキングスペース「7F」で開催されたWordPressもくもく会に参加してきました。

もくもく会というのは初めて参加したんですが、かなり最高です!僕は普段人に聞いて解決できる環境にいないので、人にアドバイスを求めることが出来るというのが本当に幸せ。

そして、やっぱり同じことに対して興味関心を持っている方と同じ空間で作業できることもあって、適度な緊張感を持って数時間作業を進めることが出来るのがいいです。

毎月開催しているみたいなので、次回もぜひ参加したいなと思っています。

しかし、僕は昨日のWordPressもくもく会WordPressを触っていた時間は1/4程度でした・・。なぜなら、環境構築でハマってしまっていたから。

今日はその辺りをおさらいしながら書いていきたいと思います。

開発環境を準備することも技術のひとつ

f:id:pochiweb:20170830083041j:plain

実は今回、テーマを作成する中で並行して身に着けたいスキルがいくつかありまして、それが

  • vagrantを使ったローカル開発環境に慣れること
  • DreamWeaverを上手く使えるようになること
  • Git、GitHubに慣れること 

 なんですが、まあ割と一般的な技術なのだろうと思います。ただ、僕の場合は仕事上で必要に迫られることないし、こういったメジャーな開発環境くらいは自分で用意できるってのも大事な技術の一つだと思うので、個人で導入していこうと思った次第です。

後はタスクランナー入れたり、CSSメタ使う、ってのも外せないところだと思うのですがそこまでやってるとテーマ作成が始まらない気がしたので、ひとまずこれで走り始めちゃいます。

というわけで、だいぶ前置きが長くなりましたがまず環境構築についてメモ。

仮想環境の概要と導入

WordPressの開発環境としては3通りあるのだろうと思います。

  • ネットワークに繋がっているサーバー
  • Xampp、Mampp
  • 仮想環境

今回作るのは最後者の仮想環境。

仮想環境のいいところは本番環境との連携ができることであったり、チームで環境を揃え易いこと。

導入方法

仮想環境を使う準備

仮想環境を作るのにはソフトを二つインストール必要があるので、それぞれを公式サイトからダウンロード&インストールします。インストーラの指示に従っていればOK。


一つ目がvirtualBox、二つ目がVagrant

それぞれの役割は
virtualBox→PCの中にサーバーを構築するための仮想空間とマシンを作る。
vagrantVirtualBoxで作るサーバーの設定をコントロールする。
といったイメージ。

ただし、この二つをインストールしただけでは仮想サーバーを起動することはできなくて、vagrantのboxファイルを用意してあげる必要がある。
ファイルとしてはvagrantfileというものがvagrantのboxファイルにあたる。このvagrantfileがフォルダに設置されると、そのフォルダを含む配下が全て仮想サーバーの中身になる。Gitのinitに考え方は近いかもしれない。

VCCWを使う

vccwはWordPress開発専用のvagrntボックスファイルという感じで、基本的にこれさえあればすぐにWordPressのテーマやプラグインの開発に最適化された環境が得られる。

GIthubに連携する

開発しながらGitに慣れていきたいので、Githubも連携。

employment.en-japan.com

この記事に沿って設定していったら特に躓くことなく出来ました。ありがたい!

gitの操作とか概念はここ↓を見ながら練習中。

github.com

 

DreamWeaverのローカルサーバーとして仮想環境をセット

これは特になんてこともなくて、「サイトの設定」でサーバーをセットするときに、

「使用する接続」をローカル / ネットワークにして、対象のフォルダを設定するだけ。

カンタン!

 

これで開発環境も整いました。さあ次のステップも頑張ります。