サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
転職
olein-design.com
ここ数年、WordPress のシェアも右肩上がりで、知名度も上がっており、利用される方も多くなってきています。 また、Webサイトの体を成すまでは比較的スムーズに誰でも進められることが多いこととインターネット上にある WordPress の情報の多さなどもあり、クラウドソーシングサービスなどで安価に制作をしてくれる方に依頼し、納めてもらうというというケースも多いと聞きます。 しかし、少々ウェブ制作を学ばれた方が安価に制作を請け負い、最低限の品質を持たないWebサイトを納められて困ってしまう依頼者（発注者）も多いようで、そういった流れでのお困りごとの相談も少なくありません。 僕個人としても、WordPress はとても好きなプロダクトですので、そのプロダクトに関わったがために（WordPressでウェブサイトを作ってもらったがために）不幸になる方がみえるのは心苦しい部分も感じていました。
WordPress ではカスタム投稿タイプやカスタムタクソノミー（カスタム分類）を用意するための便利なプラグインがたくさん用意されています。 その代表格の１つとして、Custom Post Type UI（CPT UIと略されることもあります）という WordPress プラグインがあります。 管理画面で設定を進めていくことで、PHPを直接ファイルに記述して用意する必要なく、カスタム投稿タイプやカスタムタクソノミーを設定することができます。 こちらの記事では、カスタム投稿タイプの作成と設定について深掘りしてご紹介していこうと思います。カスタムタクソノミー（カスタム分類）については別記事でご紹介しますので、少々お待ちください。 カスタム投稿タイプとは カスタム投稿タイプとは、シンプルに言うと新しい別の投稿を作ることと言えるでしょう。 WordPress には最初から「投稿」と「固定ページ」と
普段から GitHub を活用した制作や開発をされている方の中には、普段から GitHub にプッシュした情報から必要なデータだけをサーバーにアップロードするという作業をされている方も少なくないでしょう。僕も同様です。 ただ、毎回同じような作業を繰り返すのはちょっと苦痛を感じることもあり、できることなら自動化できないものかと考えてしまうのは職業病かもしれません。 今回は、そのような定番の作業を GitHub Actions を使って以下のような内容で自動化できるようにする方法をご紹介します。 こんな方向けの記事です。 GitHub を使ったことがあるGitHub Actions に興味がある同じ作業を繰り返し行いたくない また、このような条件を前提として説明をしています。 GitHub リポジトリ の master ブランチにタグ付けをしてプッシュした場合サーバー情報はリポジトリのsecr
WordPress 5.0 から導入されたブロックエディターでは、独自にブロックを制作して利用することができるようになりました。 しかし、それまで主にPHPで WordPress を扱うことが多かったのですが、カスタムブロックを制作しようとすると、どうしても JavaScript への理解が必要となり、新しくチャレンジするには、どうしても腰が重くなってしまう点は否めないでしょう。 しかし、そういったカスタムブロックを用意したいけど難しいという方々をフォローしてくれるプラグインも数多く用意されています。 その一つに Lazy Blocks というプラグインがあります。
みなさん、「フルサイト編集」という言葉を聞いたことがありますか？これは近い将来、WordPress で実現される機能の１つです。 そして、今まで WordPress で使われてきたテーマの作り方とは大きく変わることでも、少しずつ注目されてきています。 ここでは、この記事を執筆時の最新情報をもとに、フルサイト編集に対応したテーマ（ブロックテーマと呼ばれます）を作ってみたいと思います。 掲載ならびに参考にしている情報は、執筆時での最新のものとなりますので、この記事を読んで実際に同じように試してみようと考えて見える方は、そのタイミングでの最新情報も確認していただくようお願い致します。 準備 最低限の準備は以下のようにしています。 ローカル開発環境（Localを利用）WordPress Beta Tester plugin を使って WordPress 5.8 RC1 をインストール済みプラグイン
このロードマップは、Snow Monkey を使って制作者とお客さんが幸せになりながら継続的に稼ぐことができる「制作者」になるために書かれています。 そして、このロードマップが全てであり正義であるわけではありません。本来、ロードマップとは個々にフォーカスされて用意されるべきですので、これはあくまでも読まれている個々人のためのロードマップを作るためのたたき台として使っていただければ本望です。 どうも、Snow Monkey エキスパートの一員、オレインデザインのオレイン（@Olein_jp）です。初めましての方は初めまして！「お、なんかおもろいおっさんおるな」と思ったらたまにチェックしてあげてください。 音声だけでも解説を聞くことができます こちらのページに掲載されている情報をざっくりと音声でも紹介しています。 鬼長いのでBGMとしてお楽しみいただければ幸いです。 なぜこのようなロードマップ
この記事はSnow Monkey アドベントカレンダー ４日目の記事になります。 Snow Monkey エキスパートに認定いただきましたオレインデザインです。今後も名に恥じない形で貢献していこうと思います。 さて、こちらの記事では、Snow Monkeyを活用したウェブサイトを制作際の制作開始から納品・運営補助までの流れを解説してみようと思います。 といっても、ゆーてもWordPressを活用したウェブサイトということに変わりはないので、Snow Monkey特有の部分を除いて考えていただければ、一般的なウェブサイト制作におけるフローの参考にも使っていただけるかと思います。 そして、掲載した内容については、僕（オレインデザイン代表）の個人的な思想や考えも多く、そして強く反映されているものかと思います。ですので、一概に平たく皆さんに参考にしていただけるかどうか微妙なところではありますので、
こちらの記事では、npm script からGulpを呼び出してSass→CSSのコンパイルをさせたり、画像を最適化して別のところに出力させたり、JavaScriptをBabelを通して書き換えたりするためのタスクランナーを自分でつくることができるようになります。 最下部に、実際作っている実況動画と最終的なコードを掲載しているので、とりあえず試したいという方は、そちらを試されてから必要なところだけ読んでもらうという使い方もしていただけるかと思います。 前提 こちらの環境はMacですので、Macでの解説がメインです。Windows利用者の方は適宜読み換える必要がある部分があります。あらかじめご了承ください。 あると良い知識 JavaScriptがなんとなくわかると良いと思います。npmは見よう見まねでも今は大丈夫でしょう。使っていく上で必要であれば自ずと覚えれます。 タスクランナーとは？ W
WordPressテーマを開発する際には、基本的に自家製npm-scriptを使っているのですが、気にせず使っていると徐々にインストールしているパッケージのバージョンが古くなってしまいます。ですので、定期的な確認と更新が必要になってきます。 その際に、どのような方法で行なっているかをメモしておきます。 npm-check-updates を使う $ npm install -g npm-check-updates と、グローバルインストールします。すると、$ ncuというコマンドを使えるようになるので、 $ ncu と実行します。すると、 [====================] 24/24 100% @babel/core ^7.4.5 → ^7.5.4 @babel/preset-env ^7.2.0 → ^7.5.4 autoprefixer ^9.4.2 → ^9.6.1 br
WordCamp Osaka 2019での情報収集を機に、ブロックエディタに関する技術的な知識を確認しておく必要性を強く感じました。 なので、まずは公式ドキュメントを読み進めるという時間を作って手を動かして見ました。 その際に、@wordpress/scripts を初めて使ってみたので流れをまとめておきたいと思います。 @wordpress/scripts ってなに？ 僕もあまり難しいことは分かっていないのですが、要するに書いたプログラムを良しなに処理してくれると考えておけばいいのかな？ The Gutenberg Handbook shows JavaScript examples in two syntaxes: ES5 and ESNext. These are version names for the JavaScript language standard definitio
最近ではウェブサイトに地図を入れるなんてことは当たり前の流れになってきました。 しかし、その需要の流れとのバランスからか、Google MapもAPI Keyが必要になってきたりするケースが多くなって、受託案件だとそのAPI Keyを誰が取得して管理するのかという部分の議論がなかなか進まなかったり、あらかじめ結論が出ていない場合も少なくなりません。 そう言った場合に簡単に利用できるのが、Google Mapの共有です。HTML（<iframe>）で提供されるコードをポチッとコピーしてぺっ！とすれば、それだけでウェブサイトに地図を掲載できる便利なサービスです。 しかし、最近ではレスポンシブに設計したウェブサイトが基本的な制作の流れになってきています。その流れにしっかり乗せて利用するには、少しコツが必要だったりします。 この記事では、その部分のコツをコードも添えてメモしておこうと思います。 G
今、着々と100%GPLで有償のWordPressテーマの制作を進めています。その中で、今まで普通に使っているカスタマイズ方法から使う頻度が高いものをピックアップして紹介してみようと思います。 そんなに難しいカスタマイズは掲載していないので、すぐに参考にして活用していただけるものも多いと思いますのでよかったら見てみてください。 comments.phpの主な役割 coments.phpは主に以下の処理をまとめることが多いです。 コメントヘッダー（コメント部分タイトルとか）コメントナビゲーション（「次のコメント」「前のコメント」とか）全コメントの掲載コメントを受け付けていない時のメッセージコメント入力フォーム このような処理を記述（集約）することが多いです。これらの処理を行う中で、よく利用するカスタマイズ方法を紹介していこうと思います。 コメントがあるかどうかの条件分岐 そもそもコメントが存
WordPress5.2より追加されましたwp_body_open()というテンプレートタグを使って、<body>タグのすぐ後にソースコードなどを挿入する方法を紹介します。 何をするためのテンプレートタグ？ 主に<script>〜</script>のようなスクリプトを<body>タグのすぐ後に挿入したいということはよくあったと思います。Facebookのスクリプトとかもそうですよね。他にも色々と<body>タグの後に入れたいものはあるはずです。 そういった場合、今までは子テーマでテンプレートファイルの上書きをしなくてはならなくなるので、ちょっとアレですよね…。functions.phpで処理を完結できるのはうれしいですよね。 そういった問題を解消する意図があるような気がします。
最近、Gulpが4.xにバージョンアップしましたね。そのタイミングで開発環境でもGulpをアップデートしてエラーに困っている声を聞いたりします。 僕自身もGulpを使っている環境で4.xにアップデートして、それまで使っていたライブラリからエラーが出て四苦八苦しました。その時、ふと思ったんです。「Gulpに依存してるなー」と。そして、「だったらnpm-scriptの方がいいかも」と思い、npm-scriptで開発環境を作る流れを書いてみようと思います。 タスクの流れ Sassの処理 node-sassでコンパイルプリフィックス付与と圧縮処理ディレクトリを削除して新しくディレクトリを作るSassの処理をまとめて一連のタスクを流して処理 JavaScriptの処理 バンドルする圧縮する一連のタスクを流して処理 画像の処理画像圧縮の処理画像圧縮の一連の流れのタスクを作るファイルを監視するブラウザシ
Slack は、人々をそれぞれが必要とする情報につなげる、ビジネス用のメッセージングアプリです。Slack を使うことで、メンバーが 1 つの場所に集BAD+C1… Slack とは、人々と組織、そしてツールを一元化することで、多様でシームレスな「働き方」を実現するコラボレーションハブです。 言葉が難しすぎますね。簡単にいうとコミュニケーションツールです。テキストベースで連絡をやり取りするサービスですね。前述したChatworkもそうですし、Skypeもチャットでやり取りする部分では共通点があります。 Slackでおさえておきたいポイント それは、ワークスペースとチャンネルです。 ワークスペースとは Slack内でコミュニケーションを図る場所のことを指します。下の画像はSlackのアプリのスクリーンキャプチャなんですが、僕がお手伝いしているGifu WordPress Meetupの運営ス
今回はGulpの導入から最低限の活用部分まで、どうやったら使えるのか・使えるようになるのかを紹介してみたいと思います。僕は今までほぼ全ての案件においてPreprosを活用… こちらを元にして、今回はWordPressテーマのGulp開発環境を作ってみようと思います。といっても、ベースはすでに出来上がっているので、少し変更を加えたりする程度になります。 あと、環境としてはLocal by Flywheelを使うことを想定しています。 内容としては、 WordPress開発環境を作るベースの環境を作る 自動でrtl.cssを書き出す 監視タスクを作る というような感じになります。他のSassコンパイルやJavaScriptの結合・圧縮部分は前回のコードに書き出し先を変更したりする程度で大丈夫です。では始めていきましょう。 WordPress開発環境を作るベースの環境を作る まずは、前回作った環
$ node -v これで何かしら数字が出てきたら、Node.jsのインストール完了です。 プロジェクトのフォルダを作る まずは、プロジェクトのフォルダを作りましょう。デスクトップでもどこでも大丈夫なんで作りましょう。今回はデスクトップにmyprojectというフォルダを作って進めていきます。 そして、ターミナルで、作ったフォルダにアクセスしておきましょう。ここからは、基本こちらで作ったフォルダ内で作業しますので。 cdで移動先を指定するんですが、長いパスを入力するのは面倒なんで、該当フォルダをターミナルにドロップすると、パスを自動で入力してくれるので、こちらの方法の方が（特に初心者の方は）間違いがないです。 ちなみに、cdというコマンドは、Change Directoryという意味です。 npm initする ターミナルでプロジェクトフォルダに移動していることを確認して、 $ npm i
皆さん、スニペット管理ってどうしてますか？ 毎度よく書くコードなどをスニペットとして蓄えておくと、作業スピードをあげる手助けになってくれたり、余計な手間を削減できたりしますよね。 僕は、だいぶん昔にDash Expanderというスニペット管理アプリを使っていたのですが、そちらがサブスクリプション制に変わって使用をやめてから、ずっとスニペット管理方法に迷っていました。 今回、色々と試して見た結果、GitHub Gist + Cacherという組み合わせが感触がよかったのでご紹介してみることにしました。 導入はとても簡単です。GitHubアカウントを作成してCacherのアプリをダウンロードしてくるだけです。 おまけですが、Alfredを使って呼び出すこともできるので、そちらについても紹介しておきます。 GitHub Gistとは GitHubはご存知の方も多いとは思いますが、そちらのサービ
100%GPL WordPressテーマのSnow Monkeyを使っています。 とても優れたテーマなので手を加える必要はほとんどないのですが、ちょっとしたことをしたい場合には以下の２つの方法があると思います。 カスタムCSSに書く 子テーマに書く 今回は子テーマを使ってCSSカスタマイズなどを行いましたので、その際に作ったファイルをテンプレートとして公開しておきます。 Snow Monkey専用子テーマ ファイルのダウンロードはこちらからどうぞ。 GitHubよりダウンロード 使い方 ダウンロードしたZIPファイルのまま、【外観】→【テーマ】→【新規追加】→【テーマのアップロード】で選択してアップロードします。 そのまま有効化すれば利用可能です。（サムネイル画像に「CHILD」と入っている方が子テーマです） お好きなようにご利用ください。
WordPressの管理画面から新しくプラグインをインストールしようとする際に下のようなエラーに出会うことが数回あったので、対処法をメモしておこうと思います。 インストールに失敗しました: ダウンロードに失敗しました。 cURL error 35: error:0D0890A1:asn1 encoding routines:ASN1_verify:unknown message digest algorithm opensslのバージョンが原因 opensslとは、インターネット上でよく利用される暗号通信プロトコルであるSSLやTLSの機能を実装したオープンソースのライブラリのことを指します。住所やクレジットカード情報などをインターネット上で暗号化するのがSSL（Secure Sockets Layer）というものです。よく「http://からhttps://に〜」というアレです。SSL対
みなさん、既にご存知だとは思いますが、ウェブサイトを作る際に画像を利用しないということはほぼありません。 何かしらの画像を利用することが多いです。ヘッダー部分、メイン部分やブログのアイキャッチ画像、フッターに掲載する会社外観写真など、使わないことはほとんどありません。 しかし、実際の制作では（特にクライアントさんと直接やりとりすることが多いフリーランスでは？）クライアントさんが画像素材を持ち合わせていないといった場合は、適当に見繕ってと言われることも少なくないでしょう。 確かにインターネットの世界では画像素材を探すのに苦労はしません。無償・有償問わず多くの画像素材を入手することは大変なことではなくなったからです。クライアントさんも同じようにインターネットを利用されて画像などを検索されたことがある方も多いでしょう。その流れで「適当になんとかなるでしょう」と思われている方も少なくありません。
WordPressのテーマを作ろうと、いざコーディングを始めても、書くのは毎回同じようなコードだったりしませんか？ レイアウトもヘッダーがあってコンテンツとサイドバー、下にフッターというオーソドックスな形だと書くコードも似てくることがほとんどです。 当然、デザインによって違ってくる部分も大きいと思いますが、同じ記述部分をベースに、案件によって違う必要な部分を加えたり削除したりする。 そうすることによって、ゼロから築き上げていく工数を削除して、スピード感をもって制作を進めることができます。 また、クライアントには実際に触ってもらえるレベルにまで早く持っていくことができますので、コンテンツの入力をスタートしてもらうことも場合によっては可能ですし、好きなように触っていただいてウェブサイト運営開始前にWordPressに親しんでもらう機会も生み出せるでしょう。 まさに自分のために作ったWordPr
お問い合わせフォームや申し込みフォームなど、住所の入力を必要とするフォームにはよく付いています郵便番号を入力すると自動的に住所を入力してくれる機能ですが、導入するの大変なんじゃないの？と思いませんか？ 僕も面倒なんだろうなぁと調べもせず勝手な先入観を持っていたのですが、ひょんな拍子で調べてみたらこんなライブラリを見つけまして、しかもWordPressで利用されるお問い合わせフォームを設置するプラグインの代表格と言っても過言ではないContact Form 7に導入する方法も試してみましたので共有してみます。 先にお伝えしておきます。めっちゃ簡単です。 YubinBangoライブラリとは こちらのGitHubページで公開されているライブラリになります。 https://github.com/yubinbango/yubinbango これまでにない設定方法（なんとclassを指定するだけ！）
WordPressのテーマを制作するたびに毎回ゼロからソースコードを書いていくのはとても大変なことです。全てを暗記できるわけでもありませんし、リソースを見ながら書いていくことがほとんどだと思います。 毎回同じ記述をするのであれば、自分のテンプレートを持っておけばいいじゃないか！ということで、自分のテンプレートを作って作業効率化を図っています。 こちらのブログでも他にfunctions.phpについて書いている記事があるのですが、そちらへのアクセス数が他の記事に比べて多くの方に読んでいただけているようです。 ですので、テンプレートを解説して置いておけばどなたかのお役に立つのではないかと思いまして、今回は自前functions.phpのテンプレートの中身を解説して掲載してみます。 僕が使っているfunctions.phpのテンプレート 今回、掲載するためにコメントにて簡単な役割と参照URLを加
WordPressはブログシステムを構築することをベースとして作られています。その上で、様々な機能やプラグインを利用してコーポレートサイトも構築することができる、ということです。ですので、あくまでも基本はブログシステムだと僕は考えています。（最近ではコーポレートサイトを作るが多くなってきましたが） そして、WordPressにてページを作る上でベースとなるものとして「投稿」と「固定ページ」があります。 使い分け方としては、読んで字のごとくではあるのですが、ブログもしくはコーポレートサイトを構築するにあたってサイト構成を考えると思います。そして、「このページは投稿で作ろう」「このページは固定ページで実現しよう」などと構成を検討するかと思います。 この「ウェブサイトを構成する仕組み」はとても大切で重大なものでして、家づくりで例えるならば基礎部分の設計に値すると言っても過言ではありません。後から
では、実際にテーマにカスタムメニューの位置を定義していきましょう。 カスタムメニューの位置をfunctions.phpに定義する では、functions.phpファイルを開いて、カスタムメニューの位置を設定していきます。 if ( ! function_exists( 'lab_setup' ) ) : function lab_setup() { register_nav_menus( array( 'global' => 'グローバルナビ', 'header' => 'ヘッダーナビ', 'footer' => 'フッターナビ', ) ); } endif; add_action( 'after_setup_theme', 'lab_setup' ); 順に説明していきます。 １行目のif文ですが、lab_setup()がない場合にlab_setup()を読み込む、という条件分岐になり
WordPressのテーマを自作する際、もしくは子テーマを制作する際には独自のスタイルシートを作ることがほとんどです。 そして、そこには冒頭に作っているWordPressテーマの情報をしっかりと記載することが求められます。公式サイトにアップロードすることを目標としている際には当然ながらも、一般的なクライアントワークでもしっかりと明記していくことで、ちょっとしたことですが他の制作者と差別化することもできるでしょう。 そんな時に使ってもらえるようにテンプレートを用意しておきました。 WordPressテーマを制作する際に冒頭に記載するテーマ情報入力用テンプレート：基本形 /* Theme Name: テーマの名前（必須） Theme URL: テーマのサイトのURI Description: テーマの説明 Author: 作者の名前 Version: テーマのバージョン Tags: テーマの特
前回までに、style.cssにテーマ情報を記載して、index.phpにHTMLとWordPressの関数を設置しました。今回はfunctions.phpを作っていきます。では、そもそもfunctions.phpというファイルは何をしてくれるのでしょうか？ functions.phpとは 以前、WordPressにはテーマとプラグインというものがあり、それぞれテーマはデザイン部分、プラグインは機能部分を任されていると説明しました。 図で表すとこのようなイメージを持っていただくとわかりやすいかと思います。 ウェブサイトはWordPressで運用しているので、母体としてはWordPressということになりますが、そこにはデザイン的な部分をサポートするテーマと、機能的な部分をサポートするプラグインが母体のWordPressと合わさって機能していきます。 そして、これから作るファイルfuncti
今回から数回に分けて_s（underscores）を利用してWordPressテーマを作成する手順をご紹介していこうと思います。 とはいっても、僕も学習しながらそれらをまとめていく形になりますので、記事の内容に関して間違いもあるかもしれません。ご指摘やご感想などいただければと思います。 なんで_s（underscores）を使ってみようと思ったのか 今までWordPressに関するお仕事をする際には大きく分けて２つの流れがありました。１つは、既存のテーマをカスタマイズして利用する方法。そして、もう一つはゼロベースでテーマを開発する方法です。 多いのはどちらかというと後者の方なのですが、作業の大まかな流れとしては以下のようになります。 デザインを確定する（IllustratorもしくはPhotoshopなどを用いて） それらをコーディングする（HTML/CSS/jQueryなど） ブラウザに
次のページ
このページを最初にブックマークしてみませんか？
『岐阜で戦略的なWordPress利用やホームページ制作を行うなら オレインデザイン | 岐...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
