既成テーマを活用した制作の際に気をつけていること | オレインデザイン
近年、WordPress を使ったウェブサイトやホームページ制作において、便利なテーマをベースとした制作や開発をされることも増えてきているように感じています。 当然、ゼロからスクラッチでテーマ（多くはクラシックテーマかな？）を作っていくという制作手法は、現在も多く選択されていると思います。しかし、WordPress 5.0 からブロックエディターが標準エディターとなり、変化も激しく、それらに対応した整備やアップデートをオリジナルで制作納品したテーマに対応していくことは難しいと感じる制作者も多いのではないでしょうか。 であれば、テーマ側のこれらの対応は信頼できる開発者が開発しているテーマに任せ、それ以外の部分を補っていくという制作方法を選択することも増えてきています。これを冒頭にも書いている「テーマを利用した制作方法」を指しています。 本記事では、僕の独断と変換が強く反映されていますが、僕自
UpdraftPlusを使ったWordPressの自動バックアップと復元方法 | オレインデザイン
WordPress でバックアップを取得してくれるプラグインとして有名なものの一つに UpdraftPlus というプラグインがあります。 手軽にバックアップが取得でき、無料で各種クラウドストレージに自動バックアップすることもできます。 この記事では、この WordPress プラグイン UpdraftPlus の使い方を、どこよりも丁寧に詳しくご紹介します。 本記事は以下の環境を元に執筆しています。 WordPress 6.5.3 UpdraftPlus 1.24.3 UpdraftPlus: WordPress Backup & Migration Pluginバックアップ、復元、移行 – 世界で最も人気のあるバックアップ ツール。クラウドへのバックアップ – バックアップをスケジュールするか、手動でバックアップ。ja.wordpress.org UpdraftPlus HomeUpd
get_template_part()でパーツを読み込む方法と活用方法 | オレインデザイン
WordPress クラシックテーマを制作したことがある方ならご存知の方も多いでしょう get_template_part() 関数。こちらはテーマ内にある部品（パーツ）を読み込む際に利用します。 WordPress テーマに限ったことではありませんが、ディレクトリ内がさまざまな名前が付けられているファイルで煩雑になっていると、想像外のミスや問題を起こすきっかけになったりすることもあります。そう言う場合には、パラメーターを活用することで、細かな用途に分けられたパーツも整頓・管理することができるようになります。 ここでは、それら整頓する際の記述も含めて、 get_template_part() 関数について詳しく紹介していきます。 get_template_part() 関数とは テンプレートパーツをテンプレートに読み込むことができます。 また、子テーマがテーマ内の再利用可能なコードをオーバ
WordPressで利用者がよく遭遇する困りごとと対処法 | オレインデザイン
WordPress を使っていると度々目の前に現れる「困りごと」。特に WordPress を使い始めた頃、慣れていない頃、または知識レベルが上がるタイミングなどに遭遇することが増えます。 知識レベルに関係なく、何か問題が目の前に現れると焦りますよね。特に大事に育てて（運営して）いるホームページが表示されない、表示がおかしいといった状況になったまま、どうしたら良いのか分からない時は焦りしか感じません。「落ち着いて」と言われても、わかっちゃいるけど落ち着けない。わかります。 この記事では、WordPress を利用していて遭遇する頻度が高いと言われている現象について紹介しています。そして、その現象の解決方法と再度問題が起きないためのアドバイスも掲載しています。 WordPress を使ってホームページを育てていくことをもっと楽しんでくれる人を増やしたい。そういう気持ちからこのコンテンツを用意
WordPressサイトでコンテンツを壊されてしまわないようにする方法の提案 | オレインデザイン
WordPress は CMS なのでコンテンツを自由に制作し管理できることが大きなメリットの一つです。 しかし、WordPress を使ったホームページを作る制作者に知識はあれど、利用者に同様の知識やスキルがあるわけではありません。 オレインデザインにホームページ制作の依頼をされる方の中にも、これまで WordPress を触ったことがあり、基本操作にはそれほど問題がないというケースありますが、これから勉強していこうと思いますという方も見えます。 ホームページは運用が始まってからがスタートです。新しく投稿を作成したり、固定ページの情報更新は定期的に行いたいものです。しかし、WordPress に不慣れなために納品時に構築したコンテンツを意図せず壊してしまったというケースも少なくないでしょう。 本記事では、こういった課題に対応する方法を提案したいと思います。 ご注意いただきたいこと 本記事
『WordPress 6.4.x 対応 Twenty Twenty-Fourでウェブサイトを作ろう』という書籍を作りました | オレインデザイン
この度、タイトルにもあるように『WordPress 6.4.x 対応 Twenty Twenty-Fourでウェブサイトを作ろう』という書籍を作りました。 出版社から出版された場合だと「書きました」と言えるのかもしれませんが、こちらは出版社から刊行されているものではなく自費出版の書籍となるため「作りました」というタイトルにしています。 執筆もですが、編集・レイアウト・表紙作りなどは自分で行いました。（一部、原稿のチェックなど協力をいただきました。書籍巻末参照下さい） ここでは、書籍を作ろうと思ったきっかけや、制作の過程などをご紹介しようと思います。 書籍を書こうと思ったきっかけ 大きな理由としては3つあります。 まず一つ目は、以前から「自分で本を書いてみたい」と若い頃から漠然と思っていました。 特にそのために何か努力をするわけでもありませんでしたが、気持ちとしてはずっと持っていた気がします
事業サイトをWordPressブロックテーマに切り替えてみた所感 | オレインデザイン
これまで長い間、こちらのサイトでは WordPress プレミアムテーマの Snow Monkey を活用してきましたが、自身の学習と検証のためにもブロックテーマを活用して実験的に運用してみようと思い、オリジナルのブロックテーマに切り替えました。 本記事では、こちらのサイトで実際に利用しているオリジナルのブロックテーマの制作の流れや、制作を通じて感じたこと、運用を始めて感じたことなどをまとめてみたいと思います。 本記事執筆時の本サイトの環境は以下の通りです。 WordPress 6.3 テーマ：オリジナルブロックテーマ 使用プラグイン All-in-One WP Migration All-in-One WP Migration Dropbox Extension Disable Comments HIghlighting Code Block Performance Lab SEO SI
Gutenbergフェーズ2の終焉を迎えてブロックテーマを触ってみた雑感 | オレインデザイン
2023年8月8日（日本時間では9日）にリリースされました WordPress 6.3 にて、Gutenberg プロジェクトのフェーズ２が終わりを迎えるというアナウンスが以前からされていました。 Gutenberg（グーテンベルグ）というのは、WordPress においてさまざまな意味を持った使い方をされていますが、本来は、 “Gutenberg” is a codename for a whole new paradigm in WordPress site building and publishing, that aims to revolutionize the entire publishing experience as much as Gutenberg did the printed word. — 「グーテンベルグ」とは、WordPressのサイト構築とパブリッシングに
Snow Monkeyを使ったウェブサイト制作チップス2022 | オレインデザイン
この記事は Snow Monkey / unitone Advent Calendar 2022 の1日目の記事になります。 もう一年が終わってしまうんですか？年々、歳を重ねるごとに１年が過ぎ去るスピードの速さを痛感しております。そして、その加速度にも驚きしかありません。 みなさん、こんにちは。本記事は上記アドベントカレンダー向けの記事となります。また、はじめましての方も見えるかと思います。よろしくお願いいたします。 普段から Snow Monkey フォーラムやYoutube配信などで知っていただいている方も見えるかと思いますが、ここ数年 Snow Monkey にも大変お世話になっておりまして、公私共に楽しく関わらせていただいております。 HAPPY SNOW MONKEY、オレイン自学室 というサイトを作ったり、Youtubeなども時間のあるときにやらせていただいております。また、W
WordPress 5.9 を覗いてみよう | オレインデザイン
2022年1月25日にリリース予定となっているWordPress 5.9 ですが、事前にどのような変化があるのかは、毎回のリリースでもそうですが、このように Field Guide という形で情報提供されます。 WordPress 5.9 unlocks the ability to build with blocks across all parts of your site, bringing advanced design tools to build your templates, themes, and style… 今回はこちらの記事を参照しながら、WordPress 5.9 について個人的に気になった点を紹介してみます。 以下内容は個人的に意訳したものになります。内容を正確に伝えることができていない場合もあるため、必ず原文を参照いただくようお願いいたします。 また、WordP
WordPress納品前チェックリストを作りました | オレインデザイン
ここ数年、WordPress のシェアも右肩上がりで、知名度も上がっており、利用される方も多くなってきています。 また、Webサイトの体を成すまでは比較的スムーズに誰でも進められることが多いこととインターネット上にある WordPress の情報の多さなどもあり、クラウドソーシングサービスなどで安価に制作をしてくれる方に依頼し、納めてもらうというというケースも多いと聞きます。 しかし、少々ウェブ制作を学ばれた方が安価に制作を請け負い、最低限の品質を持たないWebサイトを納められて困ってしまう依頼者（発注者）も多いようで、そういった流れでのお困りごとの相談も少なくありません。 僕個人としても、WordPress はとても好きなプロダクトですので、そのプロダクトに関わったがために（WordPressでウェブサイトを作ってもらったがために）不幸になる方がみえるのは心苦しい部分も感じていました。
Lazy BlocksとMy Snow Monkeyでカスタムブロックを作る方法 | オレインデザイン
Snow Monkey をベースにウェブサイト制作を進めていると、お仕事の進め方やお客様のご要望などによっては、カスタムブロックを用意した方が総合的に便利に使ってもらえるかもしれないという状況もあるかもしれません。 そう言った場合に、スクラッチ（ゼロから）でカスタムブロックを作っても良いのですが、技術的に障壁があったり、どこまでの情報を常にフォローアップしていられるかメンテナンス的な側面からも不安に感じることもあるかと思います。 そんな時に、スクラッチよりかは比較的手軽にカスタムブロックを用意できる便利なプラグインがあります。 Lazy BlocksGenesis Custom Blocks 上記以外にもまだまだあるとは思いますが、こちらの記事では Lazy Blocks を使って My Snow Monkey（プラグイン）からカスタマイズしていき、カスタムブロックを用意する方法をご紹介し
フルサイト編集に対応したブロックテーマを作ってみる | オレインデザイン
みなさん、「フルサイト編集」という言葉を聞いたことがありますか？これは近い将来、WordPress で実現される機能の１つです。 そして、今まで WordPress で使われてきたテーマの作り方とは大きく変わることでも、少しずつ注目されてきています。 ここでは、この記事を執筆時の最新情報をもとに、フルサイト編集に対応したテーマ（ブロックテーマと呼ばれます）を作ってみたいと思います。 掲載ならびに参考にしている情報は、執筆時での最新のものとなりますので、この記事を読んで実際に同じように試してみようと考えて見える方は、そのタイミングでの最新情報も確認していただくようお願い致します。 準備 最低限の準備は以下のようにしています。 ローカル開発環境（Localを利用）WordPress Beta Tester plugin を使って WordPress 5.8 RC1 をインストール済みプラグイン
【制作過程実況動画付】npm scriptとGulp4で簡単なWeb制作向けタスクランナーを作る方法 | オレインデザイン
こちらの記事では、npm script からGulpを呼び出してSass→CSSのコンパイルをさせたり、画像を最適化して別のところに出力させたり、JavaScriptをBabelを通して書き換えたりするためのタスクランナーを自分でつくることができるようになります。 最下部に、実際作っている実況動画と最終的なコードを掲載しているので、とりあえず試したいという方は、そちらを試されてから必要なところだけ読んでもらうという使い方もしていただけるかと思います。 前提 こちらの環境はMacですので、Macでの解説がメインです。Windows利用者の方は適宜読み換える必要がある部分があります。あらかじめご了承ください。 あると良い知識 JavaScriptがなんとなくわかると良いと思います。npmは見よう見まねでも今は大丈夫でしょう。使っていく上で必要であれば自ずと覚えれます。 タスクランナーとは？ W
いまさら始めるGulpでWordPressテーマ開発 | オレインデザイン
今回はGulpの導入から最低限の活用部分まで、どうやったら使えるのか・使えるようになるのかを紹介してみたいと思… こちらを元にして、今回はWordPressテーマのGulp開発環境を作ってみようと思います。といっても、ベースはすでに出来上がっているので、少し変更を加えたりする程度になります。 あと、環境としてはLocal by Flywheelを使うことを想定しています。 内容としては、 WordPress開発環境を作るベースの環境を作る 自動でrtl.cssを書き出す 監視タスクを作る というような感じになります。他のSassコンパイルやJavaScriptの結合・圧縮部分は前回のコードに書き出し先を変更したりする程度で大丈夫です。では始めていきましょう。 WordPress開発環境を作るベースの環境を作る まずは、前回作った環境のpackage.jsonとgulpfile.jsをコピー
いまさら始めるgulp入門 | オレインデザイン
$ node -v これで何かしら数字が出てきたら、Node.jsのインストール完了です。 プロジェクトのフォルダを作る まずは、プロジェクトのフォルダを作りましょう。デスクトップでもどこでも大丈夫なんで作りましょう。今回はデスクトップにmyprojectというフォルダを作って進めていきます。 そして、ターミナルで、作ったフォルダにアクセスしておきましょう。ここからは、基本こちらで作ったフォルダ内で作業しますので。 cdで移動先を指定するんですが、長いパスを入力するのは面倒なんで、該当フォルダをターミナルにドロップすると、パスを自動で入力してくれるので、こちらの方法の方が（特に初心者の方は）間違いがないです。 ちなみに、cdというコマンドは、Change Directoryという意味です。 npm initする ターミナルでプロジェクトフォルダに移動していることを確認して、 $ npm i
Snow Monkey を使って制作者とお客さんが幸せになりながら継続的に稼げるようになるためのロードマップ | オレインデザイン
このロードマップは、Snow Monkey を使って制作者とお客さんが幸せになりながら継続的に稼ぐことができる「制作者」になるために書かれています。 そして、このロードマップが全てであり正義であるわけではありません。本来、ロードマップとは個々にフォーカスされて用意されるべきですので、これはあくまでも読まれている個々人のためのロードマップを作るためのたたき台として使っていただければ本望です。 どうも、Snow Monkey エキスパートの一員、オレインデザインのオレイン（@Olein_jp）です。初めましての方は初めまして！「お、なんかおもろいおっさんおるな」と思ったらたまにチェックしてあげてください。 音声だけでも解説を聞くことができます こちらのページに掲載されている情報をざっくりと音声でも紹介しています。 鬼長いのでBGMとしてお楽しみいただければ幸いです。 なぜこのようなロードマップ
npm installしてあるパッケージの現状と最新のバージョン確認とアップデート方法 | オレインデザイン
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHubにプッシュすると同時にサーバーにFTPアップロードする方法 | オレインデザイン
Snow Monkeyを使ったウェブサイトで求人情報を発信するために行った対策と方法 | オレインデザイン
