初めてWordPressオリジナルテーマの作成にトライしたい、という方向けの基本のマニュアルです。マニュアルというほど大袈裟なものではありませんけど、ある程度敷居が低くなると嬉しいなぁという思いを込めて記事にします。 この記事の内容はあくまで基本中の基本で、初心者・ノンプログラマー向けとなっていますので応用的な情報は殆どありません。また、説明の仕方も分かりやすさ重視で、厳密的にはちょっと違う点もあります。 初心者さん向けに、もう少し情報があってもいいかなと思って、書いてみることにしました。僕もまだまだ初級レベルなので一緒に学んでいきましょう。初級者レベルでこんな記事書くなって話ですけども。 目次 目次です。各セクションで必要と思う場所から見るようにしてください。 はじめに 作成するWebサイトの目的と構造 テーマ作成前に用意するものと環境 テーマの構造を（触り程度だけでも）理解する HTM

Hammyは、スマホ閲覧時に表示する画像を、PC閲覧時よりもサイズの小さなものに置換するプラグイン。WordPressサイトのモバイル閲覧時における表示高速化に大きく貢献します。 注意：2017.7.13現在、2年以上もの長期にわたってプラグインの更新が停止しているので、作者がもはや熱心には管理していない可能性があります。 序章:Googleさんから、モバイルのみ「画像を最適化しろ」と警告された。 ドヤ顔でWordPress高速化～Google PageSpeed Insights 90点達成対策まとめを書いたくせに、しばらくPageSpeed Insightsを見てませんでした。 先日、久しぶりに自サイトの記事の表示速度を測りました。すると衝撃的事実が判明。 なんと「モバイル」で画像最適化の警告を受けました。 修正が必要: 画像を最適化する 画像に適切なフォーマットと圧縮を選ぶことで、デ

以前、「AWS EC2 + 網元でWordPressサイトを構築」をいう記事を書いたのですが、静的なファイル群であれば同じAWSのS3を使って公開出来る＝ウェブサイトとしても活用できるので、その設定方法をメモしておきます。 AWS S3とは 元々はクラウドのストレージサービス（ファイル置き場）なのですが、静的ファイル（htmlや画像など）であればレンタルサーバーのようにウェブサイトを公開することが可能です。 料金は従量課金ですが、PHPなどの動的なファイルやデータベースなどを使わなければそこらのレンタルサーバーより低価格でホームページを公開出来ます。 詳しくはこちらをご覧ください 月額10円～でレンタルサーバーをはじめる方法 | アマゾン ウェブ サービス（AWS） S3バケットの作成 早速使える様にしてみます。 まずはManagement Console にログインし、S3をクリックし、

2017年6月29日 Wordpress SNS（ソーシャルネットワーキングサイト）でユーザー同士がコミュニケーションを取れるサイトを作りたい！そんな時に役立つのがWordPressプラグイン「BuddyPress」。メンバーになると友達の申請やメッセージの交換、グループ（コミュニティ）の作成など、Mixiライクなサイトを作ることができます。さらにWordPress3.0のマルチサイト設定をすれば各メンバーがブログの作成可能！そんな便利なプラグインを紹介します。 ↑私が10年以上利用している会計ソフト！ BuddyPressでSNSサイトを構築 目次 BuddyPressでなにができるの？ BuddyPressをインストールする WordPress3.0でマルチサイトの設定 フォーラムを追加する BuddyPressのテーマを変更する 1. BuddyPressでなにができるの？ Word

OGPタグを設定するのにOpen Graph ProというWordPressのプラグインを使ってたのですが、 descriptionの設定が不安定だったので、最近Facebook Toolsというプラグインに変えてみました。 このプラグインはOGPタグの設定だけでなく、いいねボタンやfacebookコメントボックスの設置も簡単に行えます。 このブログではOGPタグを設定するのにOpen Graph ProというWordPressのプラグインを使ってたのですが、 descriptionの設定が不安定だったので、最近Facebook Toolsというプラグインに変えてみました。 このプラグインはOGPタグの設定だけでなく、いいねボタンやfacebookコメントボックスの設置も簡単に行えます。 ざっと使い方まとめました。 インストール インストール方法は通常のWordPressプラグインと同じで

著者：シンタロヲフレッシュ Graphic Designer / cinematographer. 「prasm（プラズム、って読みます）」は週末だけが楽しいWeekenderではなく、1週間7日間、自分のしっくりを追い求め、日々をアップデートし続けるそんな“Weeker”に献げるブログです。 しっくりくるモノ・コトが好きなシンタロヲフレッシュがあなたの明日をしっくりさせるべく、しっくりにまつわるアレコレを書いていきます。 より詳しくプロフィールは「about」へ。

WordpressでAuthor一覧をTumblrのフォロワーみたいにサムネ画像付きで表示させてみました。 色々とハマったのでメモメモ。 User Photoプラグインをインストール■ User Photoプラグインのサイト Wordpressの管理画面からプラグイン > 新規追加ボタンを押し、 キーワードに『User Photo』として検索インストール・有効化して下さい。 インストールするとユーザーの編集の一番下に画像をupload出来る様になっているので、すきな画像をupします。 User PhotoプラグインをカスタマイズUser Photoプラグインはデフォルトでuserphoto(user_id)を呼ぶと、自動的にimgタグをechoしてくれます。 しかし、imgタグにupした際のwidthとheightが指定されているし、echoで表示せずに変数に入れたい事も出てくるので、画像

長崎在住、フリーランスのWordPress テーマ / プラグインデベロッパー。 多数のプロダクトをオープンソースで開発・公開しています。現在は WordPress 有料テーマ Snow Monkey を開発・販売しています。WordPress の地域コミュニティ WordBench 長崎のモデレーターも行ってます（WordPress への貢献）。

みなさんは、WordPressの著者（投稿者）情報はどうやって表示していますか。 私のブログで言うと、下の画像のようなやつです。 「この記事は私が書きました。私はこんな人です。よろしく。」みたいなやつです。 これは、WordPressのテンプレートタグ「the_author」使って表示しています。 そんな著者（投稿者）表示なんですが、とてもかっこいいプラグインがありましたのでご紹介します。 このプラグインを入れると、下のような表示ができます。 プラグインを入れると、上の画像のように 著者（投稿者）情報の表示その人が書いた最近の投稿を表示アバターにTwitter,Facebook,Google+のリンクを表示以上ができます。 タブでスムーズに切り替わりますので、なんかかっこいいですよね。 導入方法を書きましたので、興味がございましたら是非ご覧ください。 プラグインのインストールまずは、プラグ

WordPressでのカスタマイズもかなり対応出来るようになってきたので、 ここらで良く使うTipsをまとめておこうと思います。 何かの参考になれば幸いです。 カテゴリー選択をラジオボタンに WordPressの投稿画面で、記事のカテゴリー選択をラジオボタンにして単一選択にする方法 function.phpに以下の記述をすればOKです。 function my_print_footer_scripts() { echo '<script type="text/javascript"> //<![CDATA[ jQuery(document).ready(function($){ $(".categorychecklist input[type=checkbox]").each(function(){ $check = $(this); var checked = $check.attr("

こんちくわ。 今日もTwitter、Facebookを楽しんでいる@conchikuwaです。 最近ではブログを読んでいただくだけでなくTwitterやFacebookにシェアしてもらえると嬉しさ倍増です。 Facebookにブログ記事をいいね！してもらう際、ブログにOGP設定をしておけば、記事の情報が正しく投稿され、アクセスアップにも繋がります。 今回はそのOGP設定なるものをプラグインを使用せずに設定する方法をご紹介しますです。 まずOGPについてですが、 Open Graph protocolの略。 facebook、mixi、GREE等のソーシャルネットワークサービスで使用されている共通仕様で、HTML上に正しく設定しておけば、意図した内容を表示させる事ができる。 OGPについては↓のサイトさんで解りやすく説明してくれております。 フェイスブック、ミクシィ、グリーで使われている O

WordPress 3.0 より『Twenty Ten』がデフォルトテーマとなりましたが、WordPress 3.0 日本語版でもソースコードに併記されている説明は諸々の理由で英語のままとなっています。 『Twenty Ten』は 3.0 の特徴となる機能がいくつも盛り込まれているのに加え、WordPress のテーマを理解する上でとても良いお手本となるものだと思いますので、より理解が深まることも願って、日本語化をしてみました。 （ただし例によって突貫工事＋眠気と闘いながら訳しましたので、若干 WordPress 日本語版と訳語がずれている箇所がありそうな気がします。もし見つけたらこっそり教えてくださいね^^;） 翻訳ファイル名一覧 twentyten ├ 404.php ├archive.php ├attachment.php ├author.php ├category.php ├com

当ブログはMovabletype時代から6年間更新を続けています。その中でデザインやリンク構造を変更しながら、最適なユーザビリティとSEOの両立を意識してきました。 WordPress化の際は、これまでの形を完全に再現するために、一からテーマを自作しました。 当ブログで特に意識しているポイントを紹介します。 ページの分割をしない WordPressの普通のテーマだと、トップページやカテゴリーページにページネーションや次のページ&前のページへのリンクがついて、ページが分割されます。わかったブログでは、導入していません。同じタイトル名のページが無意味に増えることになるからです。重複タイトルはSEO的にNGです。 Movabletype時代にページネーションでカテゴリーページを分割したところ、検索エンジンからのアクセスが激減してしまいました。ページネーションを外したらアクセスも元に戻りました。そ

見かけたことのないWPギャラリー テーマがあったのでメモ。美しい グリッドレイアウトとダークでクール なデザインが印象的です。いろいろ 多機能で完成度の高いので、この まま使用しても全然問題なさそう。 ギャラリー用のテーマは沢山ありますけど、Grid Lockerも他のテーマに負けず劣らず完成度が高いです。 ブラックカラーをベースとしたクールで重厚感あるデザインです。可変するグリッドレイアウトで時系列を崩すこともありません。 Lightbox Lghtboxによる画像ポップアップ。サムネイルおよび、横長の画像はカスタムフィールドを使用しているようです。名前を「Thumbnail」として、値に画像URLを入力します。画像はcacheフォルダに格納されるみたいですのでご利用の際はパーミッションにお気を付け下さい。 イメージスライド コンパクトなイメージスライドの有無を選択できます。スライドの画

2014年8月22日 Wordpress WordPressを使ってWebサイトを作る際、自分のサイトならさほど気にならない管理画面も、クライアントに納品するのであれば少し手を加えて使いやすくしておきたいところ。少しデザインを変えるだけ、機能を追加・削除するだけで「オリジナル感」がでますよね。今回はそんなWordPressの裏側、管理ページのカスタマイズ方法を紹介します。 ↑私が10年以上利用している会計ソフト！ WordPressの管理ページをカスタマイズ　目次 管理バーを消す コメントに「削除」「スパム」ボタンを追加 ログイン画面：ロゴを変更する ログイン画面：CSSを変更する 管理画面左上の「W」ロゴマークを変更 投稿画面の項目を非表示 サイドバーのメニューを非表示に フッターテキストを変更 ユーザープロフィールの項目を追加 ビジュアルリッチエディターを非表示 投稿画面のビジュアルリ