OleinPressというWordPressテーマを公式リポジトリに申請して承認されるまでの流れ

OleinPress@wordpress.org

昨年くらいからかな?一昨年くらいからかな?Twitterでたまに「公式にテーマ申請したいな」というようなことをつぶやき始めてました。しかし、ずーっとやるやる詐欺を続けていたわけですが、今回やっと承認されて晴れて公式リポジトリに掲載されました!

今回は簡単なテーマ申請の流れと所管、あとどうやったら僕みたいなのが簡単にテーマ申請できたかという秘話(?)も少しお伝えできればな、と思います。

続きを読む OleinPressというWordPressテーマを公式リポジトリに申請して承認されるまでの流れ

あなたのウェブサイトはhttps://〜でアクセスできますか?押さえておきたいSSLの話

あなたのウェブサイトはhttps://〜でアクセスできますか?

突然ですが、みなさんの運営されているウェブサイトはhttps://〜でアクセスして見れるようになっていますか?

通常はhttp://olein-design.comのようにブラウザのURI入力部分に入力してホームページを直接指定して閲覧しますが、最近何かと騒がれているのは、httpにsを付けた、httpsでのアクセスができるかどうかの対策のことです。

Google Chromeというウェブサイトを閲覧するアプリがあります。「グーグル クロム」とか「クローム」とか呼ばれたりしますね。このようなインターネットを閲覧するアプリをブラウザと呼ぶのですが、他には「インターネットエクスプローラ」や「サファリ」、「エッジ」などといったブラウザが有名どころでしょうか。世界中にはたくさんのブラウザがありますが、主要なものは数えれる程度です。

さて、httpでアクセスするのではなく、httpsでアクセスできるメリットとは一体なんなのでしょうか?また、なぜ最近巷で騒がれているのでしょうか?
続きを読む あなたのウェブサイトはhttps://〜でアクセスできますか?押さえておきたいSSLの話

事業サイトをWordPress公式リポジトリに掲載されているテーマを使ってリニューアルしてみました

OleinDesignのウェブサイトを子テーマで作ってみました

最近、お仕事でもWordPressに関わることがめっきり多くなってきました。そして、その中でもほとんどのお仕事はオリジナルテーマの制作となってきます。

実際にデザインを制作することもありますし、完成したデザインをいただいて実装だけ行う場合もあります。

そして、そうやって業務をこなしていく上で感じていたことは「オリジナルテーマだけがWordPressじゃないよな」ということ。いや、当然なんですよ。仕事だからオリジナルテーマを作ることが多いだけで、実際のユーザーさんの統計を取ってみると、既存テーマを使ったブログやウェブサイトの方が多いはずです。

であれば僕も実験的に公式リポジトリに掲載されているテーマを使って事業用ウェブサイトを作ってみようかな、と思いつきました。
続きを読む 事業サイトをWordPress公式リポジトリに掲載されているテーマを使ってリニューアルしてみました

[WordPress]画像を挿入する際にalt属性を設定する方法とその必要性

WordPressで画像を挿入する際にalt属性をどこで設定するのか

モバイルファーストインデックスが騒がれ始めて、随分長い時間が経ちましたが、あまり目立った動きは聞きませんね。

しかし、いつ本格導入されるかわからないので、ある程度必要なことは準備しておくことも大切です。

こちらの記事で僕個人もあたらめてalt属性の必要性を再確認させられました。

参照:モバイル向けページの画像にはalt属性を必ず設定すること。MFIへの切り替えで検索順位に悪影響が出る可能性あり

WordPressにおける画像のalt属性の設定方法

意外にも画像を投稿や固定ページなどに挿入する際、タイトルやキャプション、alt属性などの項目を何も修正せずに挿入してしまうことは多いのではないでしょうか?

簡単にalt属性を設定して画像を挿入する方法を確認しておきましょう。

投稿画面より画像をメディアから選択しようとすると、下のような画面になります。

WordPressで画像を挿入する際にalt属性をどこで設定するのか

この「代替テキスト」という部分にテキストを挿入すると、それが自動的にalt属性になります。簡単ですね。

すでに投稿されている画像のalt属性を修正する場合

すでに投稿してある画像のalt属性を修正する方法を紹介します。WordPressでは2つのエディタモードがあり、「ビジュアルエディタ」と「テキストエディタ」というモードがあります。

ビジュアルエディタは、HTMLコードなどを書くことなく、Wordで文章を作成するような感覚で記事内容を入力していくことができます。

テキストエディタは、HTMLなどのコードを利用しながら記事を書くことができるモードになります。

両者特徴があるので、好き嫌いもあるとは思いますが、今回は両方の方法を紹介しておきます。

ビジュアルエディタで画像のalt属性を修正・変更する場合

まず、投稿や固定ページの編集画面で変更したい画像を探します。

ビジュアルエディタで画像のalt属性を修正・変更する場合〜その1

変更したい画像をクリックすると、このようなツールバーが表示されるはずです。その中のえんぴつのアイコンボタンを押します。

ビジュアルエディタで画像のalt属性を修正・変更する場合〜その2

すると、代替テキストという項目があるので、そちらのテキストを入力・修正します。

ビジュアルエディタで画像のalt属性を修正・変更する場合〜その3

上のサンプルではすでにalt属性が設定されているため、あらかじめテキストが入っていますが、何も設定されてない場合には空白になっていると思います。完了したら右下の【更新】ボタンを押して終了です。

テキストエディタで画像のalt属性を修正・変更する場合

テキストエディタで修正する場合にも同様に、記事の編集画面にて該当する写真を掲載している部分を確認します。

テキストエディタで画像のalt属性を修正・変更する場合

ソースコード内にalt属性を確認することができるかと思いますので、そちらのalt="から"の間のテキストを修正します。何も設定されていない場合にはalt=""と空白になっていると思いますので、その間にテキストを設置します。

alt属性の必要性とは

alt属性って何に使われるの?と思われる方も多いかと思いますが、Googleインデックスを考慮するのであればとても大切な要素になります。

そもそもalt属性とは、その画像が何を表しているのかと示すものとして利用されています。Google検索エンジンはとても頭が良いのですが、しかし自分で画像を解析してどんな画像なのかを認識することはできません。(そのうちできるようになるかもしれないけど…

ですので、 こちら側が「これは○○の画像ですよ」と教えてあげる必要があります。

Googleの画像検索などで出てくるのは、このalt属性などを参考にして検索結果に表示されています。

また、目の不自由な方がテキストリーダーなどを利用してウェブサイトを閲覧した際に、alt属性を設定されていない画像は読まれずスルーされてしまいます。アクセシビリティの観点からも必要であれば設置する必要がありますね。

ということで、Googleに認識してもらいたい場合とテキストリーダーに対応したい画像にはalt属性設定が必要ということを覚えておきましょう。

しかし、全ての画像に設定する必要はない

ウェブサイトの中には様々な用途で画像が用いられています。

ロゴであったり、飾り用(デザイン上必要な装飾)であったり、アイコンであったり。様々です。

先ほど書いたように、alt属性を全ての画像に設定しないといけないかというと全てではないと考えています。

上に書いたようにGoogleに読み込んで欲しい画像テキストリーダーに対応したい画像には設置するべき、ということですので、逆に言うとコンテンツに関係のない画像には設定する必要はないと考えることもできます。

まとめ

ある程度、alt属性について理解していただけたかと思います。

どの画像に必要かどうかは、みなさんそれぞれで判断していただくとして、今後、いずれ始まるであろうモバイルファーストインデックスに対応する為にもalt属性設定を見直す必要があることはお分りいただけるかと思います。

当然、PCページでのインデックスでも有用ですので、モバイル・PC関係なく必要あれば設置するルーティンを組むことをオススメします。

[WordPress]テーマ制作を手軽にスタートできるスモールスターターテーマを作りました

WordPressのテーマを作ろうと、いざコーディングを始めても、書くのは毎回同じようなコードだったりしませんか?

レイアウトもヘッダーがあってコンテンツとサイドバー、下にフッターというオーソドックスな形だと書くコードも似てくることがほとんどです。

当然、デザインによって違ってくる部分も大きいと思いますが、同じ記述部分をベースに、案件によって違う必要な部分を加えたり削除したりする。

そうすることによって、ゼロから築き上げていく工数を削除して、スピード感をもって制作を進めることができます。

また、クライアントには実際に触ってもらえるレベルにまで早く持っていくことができますので、コンテンツの入力をスタートしてもらうことも場合によっては可能ですし、好きなように触っていただいてウェブサイト運営開始前にWordPressに親しんでもらう機会も生み出せるでしょう。

まさに自分のために作ったWordPressスモールスターターテーマではありますが、肌感覚の合う方にはぜひ活用していただければと思います。

ファイル群の紹介

まずは、テーマ内にあるファイルについて説明します。

上の画像の左上から順に補足を表にまとめてみました。

ファイル名 役割
404.php アクセスしたページが存在しない場合に表示します。
検索やカテゴリー、タグクラウドなどのウィジェットを表示して再訪問を促しています。
archive.php カテゴリーやタグでの記事一覧を表示します。category.phpやtag.phpなどはこちらをベースに作成します。
comments.php コメントフォームやコメント表示部分のテンプレートです。
footer.php フッター部分のテンプレートです。全ページ共通です。
複製して別のパターンを作りwp_footer( '***' );といった感じで読み込んでもOK
functions.php よく使う機能や記述をまとめてあります。(常に使わなくてもよく使う記述は、今後、コメントアウトにて増やしていく予定)
header.php ヘッダー部分のテンプレートです。全ページ共通です
index.php ブログトップページのテンプレートです。今後コーポレートサイトに対応するためにfront-page.phpを作成した際には管理画面での設定やファイル名の変更(そのままにしておくと初期でトップページになってしまうので)などが必要になると思います。
page.php 固定ページのテンプレートです。スラッグごとのテンプレートなどを作る場合にはベースにします。
prepros-6.config これはGitHubには上がっていないローカル専用のファイルなので無視してください。(コンパイルソフトのPreprosの設定ファイルになります)
readme.html、readme.md GitHubでの説明用のドキュメントなので基本無視してください
screenshotフォルダ GitHubの説明箇所で掲載しているスクリーンショットを格納しているフォルダです。削除して構いません。
scssフォルダ 詳しくは後述します
search.php サイト内検索の結果を表示するテンプレートです。
sidebar.php サイドバーのテンプレートです。全ページ共通です。
single.php 記事詳細を表示するテンプレートになります。カスタム投稿タイプの記事専用のテンプレートなどを作る際にベースにすることができます。
style.css CSSファイルです。scssフォルダ内のstyle.scssをコンパイルして書き出しています。

scssフォルダ内にはこのようなファイルが入っています。

ファイル名 役割
_settings.scss ページ内各箇所の幅やメディアクエリのブレイクポイントなどの変数を設定しています
style.scss ベースとなるCSSを書き出しSCSSファイルです
ownedフォルダ mixinや変数、各種リセット用CSSなど自由に選ぶことができるように格納しています。_myresets.scssには自身でよく使うリセット系の記述をまとめてあります。

ざっくりとテーマ内に含まれているファイルはこのようなものがあります。実際のソースはGitHubにてご覧ください。

当テーマ制作の際に気をつけていること

テーマを作り始めると、どんどん便利な機能をつけたくなってしまいます。例えば、

  • カスタマイザーで背景色や文字色を変える
  • 痒いところに手がとどくウィジェットエリアを数多く作る
  • Google Fontを切り替えられる

などなど、便利な機能というのは際限なく浮かんできてしまいます。

しかし、販売したり公式サイトに掲載したりするためのテーマであれば、そういう機能が喜ばれたりするのですが、当テーマを作った趣旨としては「クライアントワークでWordPressテーマを作る際のスタートダッシュを素早く切れるスモールスターターテーマ」ということを考えていましたので、あまりにも多機能にして使わないものを増やすことはしたくありませんでした。

また、クライアントワークでカスタマイザーを利用したカスタマイズに対応することも経験上さほどありませんでしたので、このケースではあまり重宝しないだろうと思い、最低限のカスタマイザー対応で良いかと考えています。(カスタム背景とかカスタムヘッダー程度)

あとは、何にせよテーマ制作をスピーディーにできるように考えています。このまま有効化してもテーマとして当然機能しますが、かなりシンプルな作りになっています。

そこにスタイルや機能、動きを案件によって必要なものだけ付け加えていく。もしくは削っていく。そういった形で制作をスムースに進められるように配慮しています。

デモサイトについて

実際にプレーンのOD-Baseを触っていただけるようデモサイトを用意しました。

http://demo.olein-design.com/od-base/

今後の開発について

今後の開発については、このような点を考えています。

  • よく利用する細かな機能や関数を事前にコメントアウトで用意
  • よくあるレイアウトに対応できるようにテンプレートを増やす?(たぶんやらない)
  • SCSSファイルをもっと読みやすくする(でもモジュールごとに別ファイルにはしない)

日々草を生やしながらGitHubにて開発を進めていこうと思います。ご意見等お待ちしています。