テイクアウトやデリバリー、地元ビジネスの情報サイト「今だけ、引きこもり八王子」の作り方

この記事のURLとタイトルをコピーする


非常事態宣言が発令されて、地元八王子の飲食店やビジネスをしている方々がいろいろな新しい情報を発信されるようになりました。日々それらの情報を見ていて「この情報をまとめて発信できたらなぁ(暇だし)」と思って、「今だけ、引きこもり八王子」というWebサイトを作り4月7日に公開しました。思ってもみなかったのですが割と多くの反響をいただき、Webの作り方などに興味を持たれてる方も出てきたのでその内容(テーマ、プラグイン、運用方法など)について書こうと思いました。

「今だけ、引きこもり八王子」とは?

「今だけ、引きこもり八王子」とは、

こちらのWebサイトになります。普段からあまり外にでないのですが、今はまさに「引きこもり」状態で、そんななかでFacebookなどのSNSで地元のレストランがデリバリーを始めたり、居酒屋さんでテイクアウトが始まったり、あるいはライブハウスでクラウドファンディングが始まったりして、それらの情報を毎日興味深く見ていました。

また、この事態でいろいろな形でボランティア的な行動をされている方たちを見て、自分たちも何かできないかと思っていたので「そうだ!これらの情報をまとめてシェアするサイトがあるといいんでは?」と思いついて、作りました。

できれば近いうちに、多少の不便はあっても以前のような暮らしが戻ることを祈って「今だけ、引きこもり」と名付けました。ということで、このWebサイトは以前のような暮らしが戻ったら消滅するというWebサイトという位置づけで作っています。

また、この情報をこのブログに掲載するのはちょっとためらわれました。「今だけ、引きこもり八王子」はボランティアベースで行うということを思っていたのでアフィリエイトリンクや、このブログへのリンクは貼らないようにしていたからです。しかしながら、公開して1週間ちょっとで多くの反響をいただき、内容についてご興味ももたれ始めたので同様のWebサイトを作るときに役に立てればと思って記事にしました。若干ながらこの記事によってこのブログでの利益は上がってしまうと思うので、後ほどCOVID-19に関連したなんらかの募金に使おうと思っています。

テーマ、イラストについて

このWebサイトのテーマは @わいひらさんの、Cocoon を使わせていただいています。とても豊富な機能があり、すぐにWebサイトを立ち上げたい!というような時にとても便利です。

cocoonに関する記事

またデザインもスキンという機能で決められるので、このWebサイトでは  takasakiさんのBizarre-food(グリーンソバ)   というスキンを使わせていただいています。

イラストは、疫病を退散させるという、いらすとや さんのアマビエの画像を使わせていただいてます!

プラグインについて

プラグインはいわゆる必ず使うものや、今回のWebサイトで新しく使い始めたものなどがあります。

プラグイン概要
1All-in-One WP Migrationすべてのブログデータを移行するツール。1クリックでブログコンテンツをインポートまたはエクスポートします。 バージョン 7.19 | 作成者: ServMask
2Category Order and Taxonomy Terms Order
blog
Order Categories and all custom taxonomies terms (hierarchically) and child terms using a Drag and Drop Sortable javascript capability. バージョン 1.5.7.2 | 作成者: Nsp-Code
3Code Snippets
blog
An easy clean and simple way to run code snippets on your site. No need to edit to your theme’s functions.php file again! バージョン 2.14.0 | 作成者: Code Snippets Pro
4Contact Form 7
blog
お問い合わせフォームプラグイン。シンプル、でも柔軟。 バージョン 5.1.7 | 作成者: Takayuki Miyoshi
5Contact Form CFDB7Contact FormsSave and manage Contact Form 7 messages. Never lose important data. Contact Form CFDB7 plugin is an add-on for the Contact Form 7 plugin. バージョン 1.2.4.8 | 作成者: Arshid
6Edit Author Slug
blog
管理者(または資格のあるユーザー)にユーザーの author slug を編集したり Author Base を変更することを許可します。すなわち、- (WordPress のデフォルトの構成) http://example.com/author/username/ (プラグインが許可) http://example.com/ninja/master-ninja/ バージョン 1.6.1 | 作成者: Brandon Allen
7Google XML Sitemaps
blog
This plugin improves SEO using sitemaps for best indexation by search engines like Google Bing Yahoo and others. バージョン 4.1.0 | 作成者: Arne Brachhold
8Parent Category AutoCheck + Category Tree Checklist❤ Donate
blog
Preserves the category hierarchy on the post editing screen + Check Parent Automatically + Auto scroll to first checked バージョン 1.1.8 | 作成者: Alex Egorov
9QA Heatmap βQAHeatmapのβ版です。β版は2020年12月31日をもって使用できなくなります(データも削除されます)。正式版が出たら切り替えをお願いします。 バージョン 0.2.7.0 | 作成者: QuarkA | プラグインのサイトを表示
10Quick Featured Imagesアイキャッチ画像をまとめて設定・変更・削除したり、デフォルトのアイキャッチ画像を設定したりできる、スイス・アーミーナイフのように多機能で便利なプラグインです。  バージョン 13.4.1 | 作成者: Martin Stehle
11Search & FilterSettingsSearch and Filtering system for Pages Posts Categories Tags and Taxonomies バージョン 1.2.12 | 作成者: Designs & Code
12SearchWP Live Ajax SearchEnhance your search forms with live search powered by SearchWP (if installed) バージョン 1.4.6 | 作成者: SearchWP LLC
13WP Extended SearchSettingsExtend default search to search in selected post metataxonomies post types and all authors. バージョン 1.3 | 作成者: 5um17
14WP Multibyte Patch
blog
WP Multibyte Patch は、本家版、日本語版 WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行うプラグインです。  バージョン 2.8.4 | 作成者: 倉石 政典

これら14個のプラグインを使っています。今までこのブログで記事を書いたものについては →blog のリンクをクリックしていただければ記事を参照していただくことができます。

今回特に2つのプラグインを使って、便利な機能をつけました。それらについてざっとご説明します。

Quick Featured Images:カテゴリーに画像を指定しておき、アイキャッチとして使えるようにする。

今だけ、ひきこもり八王子では、公開されている情報をシェアするというコンテンツがメインなのでアイキャッチをそれぞれの記事につけるということができません。そこで、「カテゴリーごとに画像を決めておき、その画像がアイキャッチとして自動的に使われる」という機能を持つプラグイン Quick Featured Images を使いました。

このプラグインをインストール、有効化すると、

アイキャッチ画像というメニューが追加されるので、その中のデフォルト画像から設定をします。

上部に、

このように、アイキャッチに関する全体的な方針を決めるところがあるのでWebサイトの運用上、良い方法に設定します。

あとは、

こんな感じにカテゴリーごとに画像を設定していきます。このWebサイトではこのような設定ですが、他にも機能はたくさんあるようですので、いろいろ見て設定してみてください。

Search & FilterSettings:タグやカテゴリーで絞り込み検索ができるようにする

タグやカテゴリーの組み合わせで絞り込み検索ができるようにするプラグインです。検索するときは Search and Filterでないと出てこないかもしれません。

このプラグインです。

情報は「投稿」で提供していて、

カテゴリー、タグ(店名)の他に、カスタムタクソノミーで 地域 を追加しています。プラグインを使って、カテゴリー+タグ(店舗・サービス種別)+地域 で絞り込み検索ができるようにするにはショートコードを使います。

テキストウィジェットを使って

[searchandfilter fields=”,category,post_tag,area,” search_placeholder="キーワード" headings=",カテゴリー,店舗・サービス,地域" hierarchical=",1,1,1" submit_label="検索"]

と、このようにすると

このような検索が表示され、使えるようになります。

日々の更新方法について

公開して1週間が過ぎましたが、掲載するお店などの情報がどんどん増えてきました。できるかぎり多くの新しい情報を掲載したいので日々このように運用をしています。

新しい店舗、ビジネスを調べる

FacebookやTwitter、Instagramなどで 八王子 デリバリー や 八王子 営業時間 などのキーワードで調べて新しい情報を探しています。

既に掲載した情報の新規情報を探す

既に掲載した情報でもこの事態ですので、日々情報は発信されていきます。それらの情報を見逃さないように Google Spreadsheet で一覧を作っています。

こんな感じです。それでも100近いWebサイトがあるので、毎日のチェックが大変でした。そこで、URLを一気に開くことのできるChrome拡張機能を見つけて入れました。

Pastyという拡張機能です。この機能についての情報は、

【Google Chrome】コピーしたURLを一括で開く「Pasty」 – 仕事が捗るWebディレクターの仕事術

こちらで見つけて、使わせていただきました!ありがとうございます。

まとめ:全部は書き切れませんでしたが、、、

ということでおおよその内容がわかるように急ぎ、記事を書いてみました。もちろんすべての内容については書けていないのですが、ちょっと工夫したところなどについては書けたかなと思います。

「今だけ、ひきこもり八王子」について情報の追加などございましたら お問い合わせ よりいただければと思います。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

この記事のURLとタイトルをコピーする
スポンサーリンク
スポンサー広告
トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。