WP-MarkdownでWordPressの記事をMarkdownでも書けるようにする

20131009 0

記事をMarkdownで書く機会が増えているのでWordPressへの投稿記事もMarkdownに全面移行することにしました。と言っても実は個人的には既にやっていてエディタ上で記事を書いてHTMLに変換したコードを貼り付けるというやり方でしたが、スタッフたちにもMarkdownで記事を書いてもらうにあたって、中にはWordPressのダッシュボードから記事を書くメンバーもいるだろうと思い「WP-Markdown」を導入しました。

導入方法

WordPressのダッシュボード>プラグイン>新規追加で「WP-Markdown」を検索してインストールするだけです

設定方法

個人的にはここで一瞬詰まった(^^;
設定項目の中にどこを見てもWP-Markdownがないので「あれ?失敗した?」と思ったら…

ダッシュボード>設定>投稿設定

でした。こちらを開くと投稿設定の中にMarkdownの項目があり、どの投稿の際にMarkdownを有効にするかを設定することができます。

20131009 2

記事の投稿

Markdownを有効にすると、投稿画面でMarkdownで記事を書くと、下半分にHTMLに変換された記事が表示されるようになりました。

20131009 1

これでMarkdownでもWordPressの記事が書けるように!!

Instant Markdown
Instant Markdown
posted with amazlet at 13.10.09
Packt Publishing (2013-08-26)
プロが選ぶ WordPress優良プラグイン事典
相原 知栄子 一戸 健宏 鳥山 優子 西川 伸一 服部 久純 星野 邦敏 松田 千尋 吉澤 富美 大串 肇 大島 義裕 大曲 仁 北村 崇 小島 勝茂 後藤 賢司 染谷 昌利 高野 直子 高橋 文樹
エムディエヌコーポレーション
売り上げランキング: 25,980

WordPressテーマの制作の流れ PART.1

WordPressテーマの制作の流れ PART.1

20130911 1

WordPressをCMSとして採用する場面は、弊社(株式会社wEVA)でも多い方です。積極的な更新が必要なサイトであったり…サイトの運営形態にもあわせて選択するように心がけていますがそれでも資料の多さやカスタマイズのしやすさからもWordPressを採用する場面は結構多いのではないかと思います。

WordPressのオリジナルテーマの制作方法は他のサイトや書籍でもいろいろと紹介されているので、ここであらためて書く必要もないように思いましたが、聞かれることも多いのでまとめてみます。

WordPressのインストール

まず、ここから先の記事はWordPressがインストールされていることを前提に解説します。レンタルサーバーでも構いませんがローカルのマシンにWordPressをインストールしておくと、その都度FTPする必要もありませんし、使っては壊して…という感じでいくらでも実験もできるので是非インストールをオススメします。

  • XAMPPやMAMPの環境をつくる
  • WordPressを解凍し、Webサーバーのサイトフォルダにコピーする
  • WordPressを解凍してコピーしたフォルダをブラウザで開く
  • 完了!!(笑)

インストールの説明についてはさらっと(^^;

WordPressオリジナルテーマの制作

WordPressのオリジナルテーマの制作は以下の様な流れでおこないます。

  1. まずはワイヤーフレームを制作する
  2. HTMLとCSSでサイトデザインする
  3. style.cssを制作する
  4. 各パーツに分解する
  5. 確認

まずは、上記の順番に沿って説明していきます。

WordPressの管理画面の枠の中にコピペしている方を見かけますが、自分の場合は「wp-content」の下の「themes」フォルダにFTPするようにしています。

まずはワイヤーフレームを制作する

まずは通常のサイトを制作するのと同様にワイヤーフレームを制作します。ここで書かれたワイヤーフレームはこの後もページを分解してパーツにした時などの設計図にもなるので重要です。ページのヘッダはどこからどこまでなのか?サイドバーはどうするか?フッタもどこからどこまでなのか?…この他にも共通してサイト内で利用される部品化のできる部分はどこなのかを明確にしましょう。

HTMLとCSSでサイトデザインする

ワイヤーフレーム(モックアップ)に従ってコーディングを始めます。この時点ではWordPressはそんなに意識せず、出来上がったフHTMLファイルをブラウザでチェックするなど、一般のサイトを作る時と同じ流れでHTMLファイルとCSSファイルを制作します。

また、CSSについては次で制作する「style.css」に内容を書き足しても構いませんし、「style.css」から「@import url('stylesheets/style.css');」のように外部ファイルとして読み込んでも構いません(弊社の場合は管理上楽なので後者の外部ファイル形式でやっています)

style.cssを制作する

テーマを入れるフォルダに必ず必要な「style.css」を制作します。このファイルには一番最初に以下のような記述が必要です。ここに書かれた内容をWordPressは判断し、このフォルダの中身がテーマファイル一式だと認識します(同時にscreenshot.pngも作っておきます)。

各パーツに分解する

WordPressのテンプレートファイルで一番最初に読み込まれるファイルは「index.php」です。このファイルをざっくり書くと以下の様な構成になっています。いきなりPHPが書かれているのでびっくりする方もいるかもしれませんが、ここで書かれているPHPのコードはそれぞれ「header.phpを読み込む」、「sidebar.phpを読み込む」、「footer.phpを読み込む」とだけ書かれています。

まずは、さっき制作したHTMLファイルをワイヤーフレームを参考にしながらヘッダ、フッタ、必要ならばサイドバーに分割します。

分割したファイルはそれぞれ「header.php」、「footer.php」、「sidebar.php」と名前をつけて保存します。

上のコードを参考にしての「index.php」も制作しておきます。この時点ではメインの記事の部分はダミーのテキストのままでも空っぽでも構いません。

ここで一旦、制作出来たファイルを全てローカルの「wp-content」の下の「themes」フォルダ配下にテーマ専用のフォルダをつくって保存し、WordPressの管理画面から「外観」→「テーマ」を開いてみましょう。ここまでの流れがうまくできていれば「利用可能なテーマ」の中に先ほど保存したscreenshot.pngと、テーマの情報が表示されているはずです。

試しにそのテーマを「有効化」してページを開いてみましょう。

記事はダミーか何もないけれども、サイトが表示されているのは確認できましたか?

次回に続きます

今回はここまでですが、次回はここで制作したトップページに記事を読み込んで表示する部分を説明していこうと思います。

※こうしてテンプレートのつくり方をあらためて書き上げておきましたが、実際の現場で必要とされているWordPressの説明は全く違うものなので、いつか機会を設けて解説する機会があればと思います。

基礎からのWordPress (BASIC LESSON For Web Engineers)
高橋 のり
ソフトバンククリエイティブ
売り上げランキング: 7,396
【Amazon.co.jp限定特典付き】本格ビジネスサイトを作りながら学ぶ WordPressの教科書2  スマートフォン対応サイト編
プライム・ストラテジー株式会社
ソフトバンククリエイティブ
売り上げランキング: 755
プロが選ぶ WordPress優良プラグイン事典
相原 知栄子 一戸 健宏 鳥山 優子 西川 伸一 服部 久純 星野 邦敏 松田 千尋 吉澤 富美 大串 肇 大島 義裕 大曲 仁 北村 崇 小島 勝茂 後藤 賢司 染谷 昌利 高野 直子 高橋 文樹
エムディエヌコーポレーション
売り上げランキング: 65,169

ロリポップのWordPressを復旧させてみた「Hacked by Krad Xin」

20130830 0

昨日から荒れに荒れているロリポップに設置されているWordPressが外からの攻撃により多くのサイトがハッキングされ「Hacked by Krad Xin」というタイトルに書き換えられる等の話題ですが。まず、弊社クライアントのサイトではパーミッションの設定などできる限りおこなってきているので被害は起きていませんでした。ところが本日になってFacebook沖縄ユーザーグループの仲間たちから相談が寄せられるようになり、「注意喚起が足りなかった」とあらためて注意喚起とともに復旧方法を説明致します。

被害の全体像については「当社サービス「ロリポップ!レンタルサーバー」ユーザーサイトへの第三者による大規模攻撃について」のページでの方で随時更新されていくのを見ていくしかないのですが…

ロリポップからも、また別のサーバー会社からも昨日〜今日といろんなメッセージが届きまくっているくらいに、昨夜から今日にかけてはサイトのセキュリティが注目されています。

さて、各サイトの被害は

●サイト名を「Hacked by Krad Xin」と書き換えられる
●文字コードを変更される
●ウィジェットを設置される

という状況になっているようです。

文字コードの変更

文字コードの変更は管理画面の「設定」から「表示設定」を開くと「文字コード」という項目があります。ここをUTF-8に戻してください。

ウィジェットを設置される

20130830 1

次は管理画面の「外観」から「ウィジェット」を開くと、ウィジェットの中に設定もしていないのに入っているウィジェットがあるはずです(この画面上では既に削除しています)。

20130830 2

このWordPressは既に復旧させたあとなのでウィジェットも正常になっていますが、ウィジェットを開き、左下の「削除」を押してウィジェットを削除してしまいましょう。

自分で設定したウィジェットは削除されてしまっているはずなので、ウィジェットについては自力でこの画面から復旧させる必要があります。

サイト名を変更された

20130830 3

サイト名については管理画面の「設定」「一般」で設定しなおして下さい。

WordPressとしてはこれだけで復旧できます。ただ、この後も気持ち悪いので管理者アカウントのパスワードの変更やアカウントがadminのままでしたらアカウント名を変えたり、パーミッションを変えたりと作業してセキュリティを高めておく必要があるかと思います。

周囲でもWordPressを利用している方はどんどん増えている中でこういう問題が起きてしまうとちょっと残念な気もしてしまいますね。しかし、こうしてネット上やフォーラム(サイト改ざん?)で多くの人の集合知で解決策が提示されていくのもいいことですね。

【Amazon.co.jp限定特典付き】本格ビジネスサイトを作りながら学ぶ WordPressの教科書2  スマートフォン対応サイト編
プライム・ストラテジー株式会社
ソフトバンククリエイティブ
売り上げランキング: 308
プロが選ぶ WordPress優良プラグイン事典
相原 知栄子 一戸 健宏 鳥山 優子 西川 伸一 服部 久純 星野 邦敏 松田 千尋 吉澤 富美 大串 肇 大島 義裕 大曲 仁 北村 崇 小島 勝茂 後藤 賢司 染谷 昌利 高野 直子 高橋 文樹
エムディエヌコーポレーション
売り上げランキング: 10,176