wordpress

WordPressでサイトを制作する際に使用するテーマは、有料または無料で「既存テーマ」が存在し、それを用いることができます。 その一方、１から自分でプログラミングを行い、「オリジナルテーマ」として制作することもできます。 では、既存テーマが存在するにも関わらず、わざわざオリジナルテーマを制作する必要はあるのでしょうか？ 結論：サイト制作を請負いやすくするために必要 先に結論を申し上げると、「オリジナルテーマ」によるサイトの制作ができることが望ましいです。 理由は オリジナルテーマの制作ができることで、既存テーマへの理解が深まり提案のクオリティが上がること高単価＆契約率に繋がりやすくなること他のローコード・ノーコードを売りにしているWEB制作者との差別化を図ることができる。 などがあります。 そもそも、WordPressのテーマとは？ 改めて「WordPressのテーマってなに？」というところに触れてみます。 WordPress（ワードプレス）はPHPというプログラミング言語で作られているコンテンツを管理するシステム（Contents Management System：CMS）の一種で、ブログやWebサイトを作る事ができます。 その中にあるテーマとは、WordPress1サイトにつき1つだけ設定できる、ページ構成やそのレイアウト、色・装飾などの見た目が施されたセット一式で、他の方が開発した既存テーマと自作するオリジナルテーマがあります。 WordPressを導入後、いずれかのテーマを一つ選んでから構築を開始します。 既存テーマとオリジナルテーマの比較表 既存テーマとオリジナルテーマの違いを一覧表にまとめました。 既存テーマオリジナルテーマオリジナル性低い高い構築の工数少ない多い費用安いまたは無料高いカスタマイズ性低い高いユーザービリティ高い低い主な取引相手エンドユーザー向け制作会社向け※相対的な評価です。 表にしてみると、それぞれにメリットやデメリットがあることがわかります。 ですから、構築案件ごとに何を優先させる（コスト・オリジナル性など）かにより判断するのが良いかと思います。 オリジナルテーマが必要な理由 オリジナルテーマによるサイト製作ができることで、請負の幅が広がるとは先にも言いましたが、具体的には次の点になります。 制作会社からの案件を受注しやすい（というか、オリジナルテーマで制作ができないと見向きみされない）エンドユーザー（依頼主）と直接やりとりをする際の要望に対する手札が増え、依頼を受けやすくなる。既存テーマ構築時のカスタマイズスキルが上がる。 上記の中の「既存テーマ構築時のカスタマイズスキルが上がる。」とは、既存テーマを土台に構築をする場合でも何らかのカスタマイズが必要になるケースが多いですが、その際のカスタマイズ方法やカスタマイズ工数の算定がしやすくなるという意味です。 オリジナルテーマに必要なもの 既存テーマによる構築の場合は、CSSの追加も含めて管理画面のみでも構築できますが、オリジナルテーマの場合はテキストエディタ（VSCodeが良いです）を導入し、Sass（CSSの便利な記法）をコンパイルするためのVSCodeの拡張機能などがあると便利です。 オリジナルテーマの学習ステップ WordPressにはページを表示の表示や正しいリンク先の表示のためのお作法があります。 一度理解してしまえば基本の部分はどのサイトであっても同じですが、ここが難しく、挫折しやすいところです。 ですから、学習方法は素直に評価が高い方法を選択したいところです。 オリジナルテーマの学習方法 オリジナルテーマの学習法は参考書やオンラインスクールなど幅広くありますが、おすすめはたにまこさんがudemyで公開しているWordPress開発マスター講座です。 おすすめするは主な理由は、下記の３点です。 オリジナルテーマ制作に必要なコンテンツが全て盛り込まれている仕組みの説明が丁寧なので、理解が早い多くの先輩がこれを元にスキルアップした実績がある 順にご説明します。 オリジナルテーマ制作に必要なコンテンツが全て盛り込まれている 全部で100を超える短めのブロックから構成されており、オリジナルテーマの実装に必要なコンテンツが網羅されています。 また、実装の仕方もより利便性の高い方法で説明されていて、即実戦で通用するものが多数です。（メニューの動的化のところで特に思いました） 仕組みの説明が丁寧なので、理解が早い わからないことがあるとググったりするかと思うのですが、その場合「コピペOK」みたいな文字を信用してそのまま中身の意味もわからず使い続け、仕組みがいつまでも定着しない、なんてことはないですか？（私はそうです） この講座で仕組みが丁寧に説明されており、仕組みが自分の中で定着しやすいことから、効率よくスキルアップすることができます。 また、通常だとプラグインを使いがちな実装方法の説明もしっかりされており、より深く知識を得ることができます。 多くの先輩がこれを元にスキルアップした実績がある これはわざわざ言うまでもないのですが、私を含めて参考書など様々なコンテンツを利用した先輩WEB制作者が異口同音にこの講座が一番良いと言っており、実績は間違いないと思います。 まとめ オリジナルテーマ制作を理解している人でしたら、既存テーマを用いてサイト制作をすることが可能ですが、逆は難しいです。 既存テーマのみで案件を対応している方であっても今後より仕事を増やしていくため、是非オリジナルテーマによるテーマ制作に挑戦してみてくださいね！ もしご不明な点がありましたら、遠慮なくTwitterのDMでメッセージをお願いします！

　案件の提案などで、Wordpressのテーマである「Snow Monkey」を使われている方も多いのではないかと思います。ノーコードでサクサク作れるうえに、GoogleアナリティクスなどのSEO関連設定もバッチリできて言うことなしです！ 　とはいえ、案件の要件定義上CSSや場合によってはJava Script(JQuery)を使わざるを得ない一方、「カスタマイズ環境の構築に手間取った」なんてお声もちらほら。 　というわけで、そんな人のお役に立てればと思い、この記事を作成しました。 このページを見てもらいたい人 プラグイン「My Snow Monkey」を入れたけど、どうやって使えばよいかわからないという方CSSまでは設定できたけど、Java Scriptの設定ができていないという方 下準備 Snow Monkeyのカスタマイズは子テーマではなく、プラグイン「my-snow-monkey」が推奨されており、これをインストールするところからなんですが、こちらはSnow Monkeyといえばこの人！のじゃんきーの兄貴のブログがとても分かりやすいので、そちらをご参照ください。じゃんきーさん、ありがとうございます。 今回使用するMy Snow Monkeyのフォルダ完成図 デフォルトから配置を変え、こんな感じにしました。参照するstyle.cssを直下に置いているのは参照ファイルの視認性をあげるためです。 My Snow Monkeyに追記するコード 公式サイトのデフォルトコードにjsを読み込めるように追記されております。なお、こちらのコードはじゅんぺーさんのブログのもので、それを使い、自分なりに仕組みを考察したものです。大変勉強になりました。ありがとうございます。 じゅんぺーさんのブログは素晴らしく、必要事項は全て説明がされているため、リンク先からすんなり環境構築が済んだ方はこの先を読む必要はありません。どんどんカスタマイズしてスキルアップしちゃってください！ 私と同じく足踏みした人だけ以下の記事をお読みください。 仕組みを理解するための考察 アクションフック「wp_enqueue_scripts」はWordpress標準のものですので、Ｗordpress化をされたことがある方なら一度は目をにしたことがあるはずです。その引数である「msm_enqueue_style_script」関数（関数名をつけずに無名関数でも可能）で読み込みたいjsとcss指定しています。swiper.jsなど、追加で読み込みしたいファイルがある場合は、ここに追記すればjsファイルの追加が可能です。 男性スノモンでもCSSやJava Scriptを自由に追加できると思うと、使い勝手が飛躍的に上がるね！ 参照ファイルを増やす際、それぞれの名称（上でいうとmsm_styleとmsm_scripts）は異なる名称にしてください。挙動がおかしくなります。 ＶS CodeでのLive Sass Compilerのインストール インストールがまだお済みでないようでしたら、こちらのサイトがとてもわかりやすいです。ここではSass環境の構築の説明は割愛させていただきます。 ※上記と同じ状態にする場合は、my-snow-monkey\styles\src\_test.scssのファイルを作成し、style.scssファイル内で「@import ‘src/test’;」とコードを書いてコンパイル対象のSCSSファイル読み込み用のパスを通しておいてください。じゅんぺーさんのファイルをお使いになるのが早いですが、ご自身で考えながらやるのもよいかもしれません。 設定後、画面下にある「Watch Sass」をクリックして「watching…」状態にすることをお忘れなく。 本来はすんなり完了ですが・・・ 上記コードをマイスノモンに追記し、 Live Sass Compiler をインストールして起動すれば本来はCSSもJSも反映します。にもかかわらず、CSSの反映がうまくいかない方は、次の点が考えられないでしょうか。 マイスノモンのCSS読み込みパスと Live Sass Compiler パスの不一致 私はまさにこれだったのですが、ファイルの整理によりSassがコンパイルした後吐き出すStyle.cssのファイルパスとマイスノモンで指定するファイルパス（上で/* […]