onocomコンテンツへスキップonocomWordPress、concrete5、Mautic、JavaScript、PHP、Docker、プログラミングなどの覚え書きをしていきます。【Office】Excelでプロジェクト管理(工程・実績管理・スケジュール管理)するためのガントチャート・テンプレートを作りました。Flywheel、皆さんはどんなツールを使っていますか?開発環境って結構構築が面倒だったりしますよね。ここ1年くらい、私はDockerで開発環境を構築しています。非常にシンプルな開発環境ですが、個人的には気に入っています。メールの送受信も確認できるMailHog付きです。WordPressがサクッと動作するDocker環境Git以下のリポジトリを利用します。初回起動時には、WordPressのインストール画面が立ち上がるはずです。phpMyAdminhttp://localhost:8080/MailHogローカル環境でメール受信・送信を確認する画面が立ち上がります。http://localhost:8025/ディレクトリ構成Dockerが起動すると、以下のディレクトリが生成されます。htmlがApacheのドキュメントルートになります。www配下のディレクトリは、gitignoreされています。まとめシンプルな構成にしているので改善とかもしやすいかな。ご活用いただけると嬉しいです。Osakaでお話した内容を再改定してWordBench三重でお話をさせていただきました。2018にWordPressの次期エディターであるGutenbergのお話で登壇しました。Kyotoでお話した内容と基本同じではあるのですが、半年経つとGutenbergのテーマサポートなどの方法が変更されていたりと、大幅な改定を行いました(大変でしたっ)。onoGutenbergってなんだ?GutenbergとはWordPressの5.0からコアに搭載予定のエディターになります。エディターインターフェースといったほうがしっくり来るかも。今までエディタとは大きく異なり、ブロックと呼ばれるコンテンツのまとまりを組み上げることによってページを作成するのが大きな特徴です。パブリッシングプラットフォームであるWordPressのパブリッシングを大きく変える壮大なプロジェクトで、このエディターの導入には大きな苦労が伴うと思われます。WixやJimdoなど、最近は誰でも簡単に編集ができるプラットフォームが多くなってきました。いった環境の変化にユーザーは敏感です。簡単な方に流れていくのは人の真理でもあります。今はWordPressのシェアは世界一ですが、そのようなユーザーのことを思うと、未来はどうなっているかは誰にもわかりません。その未来を見据えたプロジェクトがGutenbergエディターだと私は感じています。当日は、デモサイトを利用して参加者に触っていただく機会を設けました。対応のテーマの作り方ここが半年前と大きく異なる部分でした。なくなり、それぞれがテーマサポートとして独立しました。#ffffff;}GutenbergChallengeGutenbergを利用して、指定されたデザインのランディングページを作るワークショップも実施しました。実際に、参加者が頑張って作ってくれたページは以下のURLの最下部よりご確認いただけます!http://wb.onocom.net/GutenbergChallengeの説明ページ用のプラグインも作りました。GitHubで公開しています。Gutenbergで作るランディングページ!Gutenbergの使い方やテーマ対応方法!WordPressの次期エディタ「Gutenberg」について学ぼうあけましておめでとうございます。今年もよろしくお願いします!新年開けてすぐの今日、WordBench京都&大阪でWordPressの次期エディタである「Gutenberg(グーテンベルク)」のお話をさせていただきました。このポストは、WordBench京都&大阪の振り返りポストです。WordPressとWebマーケティングことはじめhttps://wb-kyoto.connpass.com/event/70848/大阪のたこ焼き美味しかったです!セッションスライド当日利用したスライドです。デモサイトは停止しました。Gutenbergを使ってみたい方は以下を読み進めてくださいな。Gutenbergってなんだ?Gutenberg(グーテンベルク)とはWordPressのバージョン5.0に搭載予定の次期エディタのことです。活版印刷技術の発明家「ヨハネス・グーテンベルク」にちなんで命名されたようです。現在のWordPressのエディタはこのブログのように単純な投稿には適していますが、ちょっと複雑なことをやろうとすると、極端に難しくなりますよね。Gutenbergでは、ブロックと言う単位でコンテンツを構成します。ブロックには、見出しや文章、画像、動画と言った基本ブロック以外にも、ショートコードやウィジェットなども組み合わせてコンテンツを組み立てる事ができます。Gutenbergを試してみたい!Gutenbergは現在プラグイン形式で開発中です。Gutenbergを試してみたい方は、以下のURLからダウンロードするか、WordPressのプラグインインストール画面から「Gutenberg」と入力してインストールし、有効化してください。鋭意開発中なので本番環境などで使わない方がいいです。PluginGutenbergGutenbergを無効化したい!Gutenbergの導入は怖い!Gutenbergを利用したくない!無効化したい!という方のために、今まで通りのエディタを使う為のプラグインも開発されています。カスタムフィールドをゴリゴリ使っているサイトはちょっと心配ですもんね。現在鋭意開発中なので本番環境などで使わない方がいいです。EditorGutenbergの使い方を知りたいGutenbergを有効化すると、管理画面のサイドバーに「Gutenberg」メニューが現れます。そちらにカーソルを合わせて「デモ」を選択すると、Gutenbergのデモ記事が生成されます。ブロックの追加ボタン、リドゥ・アンドゥボタンが配置されています。上部右上には、プレビューボタン、公開ボタン、右サイドバーの表示切り替え、エディタ切り替え(グーテンベルクとクラシックエディタを切り替えるボタン)が配置されています。右サイドバーには、DocumentタブとBlockタブがあります。Documentタブでは、記事のカテゴリやアイキャッチ画像、抜粋が設定できます。ID・クラスの設定等ができます。コンテンツエリア見慣れないですが、画像やテキストは別々のブロックとしてあつかわれています。左上、もしくはブロックとブロックの間にカーソルを合わせると出て来るブロック追加ボタン(プラスボタン)を押してブロックを追加していきます。どんなブロックが存在するの?デフォルトでは、以下のブロックが定義されています。多く見えますが、実際に使おうと思うとまだまだ開発段階ということが分かるかと。カラムレイアウト(3列や4列)には現在非対応で、5.0のタイミングには対応されないかもしれません。早く対応して欲しい!数多くの埋め込みにも対応しています。ブロックのデータはどうやって保存されるの?各ブロックの情報は、HTMLコメント形式でwp_postsテーブルに保存されます。表示の際には、HTMLコメントが解釈されて動画や画像が埋め込まれたりします。これから改善されていくところやメモなどパーマリンクの設定箇所がない投稿一覧クイック編集から編集するしかなさそう。この件について、Githubで議論されている。https://github.com/WordPress/gutenberg/pull/3418カラムを柔軟に作れない今のところ柔軟なカラム設定出来ない。編集画面が真っ白になることがあるローカル環境にGutenbergをインストールして記事を新規作成したところ、なぜか画面が真っ白になった。画面を開いて、「変更を保存」ボタンを押すことで正常に動作するようになった。テーマをGutenbergに対応させるには以下の作業は必須ではありませんが、functions.phpやstyle.cssに記述しておくとGutenbergの機能を活用できると思います。編集add_theme_supportに’gutenberg’を指定します。wide-imagesは、左寄せ・右寄せ・中央寄せの他に「ワイド幅」や「全幅」を追加するためのオプションです。colorsは、Gutenbergのテキストブロック等で指定する色を予め設定しておくオプションです。サイトのキーカラー等を設定しておくとごちゃごちゃせずに良さそうですね。編集add_theme_supportでwide-imagesオプションを設定し、ブロックに対してワイド幅や全幅を指定すると、.alignwideや.alignfullというクラスが付加されます。そのクラスに対してテーマとしての振る舞いを定義します。Challenge」と題して、Gutenbergでランディングページを作ってもらうという簡易のワークショップを行いました。コメントを残すWordPressの検索フォームのカスタマイズ!カスタムタクソノミーを検索条件に追加する方法WordPressの検索フォームをカスタマイズしようWordPressの検索フォームはキーワードを入力するテキストボックスと、検索を実行する検索ボタンで構成されています。この検索フォームにカスタムタクソノミーを指定する方法をご紹介します。検索条件にカスタムタクソノミーを追加しよう以下の順序で検索フォームをカスタマイズしていきます。テーマフォルダに追加しようまずやることは、searchform.phpというファイルをテーマフォルダ内に追加することから始めます。中身は取り敢えず空で大丈夫です。エディタで開いて以下のように書き換えます。タクソノミースラッグ(以下例だとpref)をご自身のサイトに付け加えてあげてください。以下部分をコピーして、formタグ内に追加することで、複数のカスタムタクソノミーからのAND条件検索も行えます。カスタマイズした検索ボックスを呼び出し検索ボックスを表示させたい箇所のテンプレート(sidebar.php等)に以下のコードを記載します。?>これでカスタマイズした検索ボックスが表示されるはずです。CSSの調整等はよしなにしてくださいませ。まとめ結構簡単に検索条件にタクソノミーを追加できた!その他にも、特定の日付範囲内の記事を検索する。やろうと思えば出来ます。その場合、上記以外にも修正が必要です。それはまた気が向いたら追記しようかな。