Category: ワードプレス

Wordpress
winmonaye

【エレメンター】設定

エレメンターの設定メニュー関する情報、それぞれ項目の意味を紹介します。 一般 投稿タイプ エレメントの使用場所を選択します。 デフォルトカラーを無効化 テーマのカラー設定を使用するか、エレメンターでコントロールするかを選択します。 デフォルトフォントを無効化 テーマのタイポグラフィ設定を使用するか、エレメンターがそれを制御するかを選択します。 エレメンターを改善する>使用状況データのトラッキング 有効にすることで、エレメンターを使用している方法について学び、改善するのに役立ちます。 スタイル デフォルトの汎用フォント デフォルトのフォールバックフォントを選択する コンテンツの幅 コンテンツ領域のデフォルト幅を設定する。 ウィジェット間のスペース ウィジェット間のスペースを設定する。 選択範囲をフィットするよう引き伸ばす 広がったセクションがフィットする親エレメントのセレクタを入力する。 ページタイトルセレクター ページタイトルを非表示にするには、CSSセレクタをここに入力してください。 タブレットのブレークポイント デスクトップデバイスとタブレットデバイスの間にブレークポイントを設定します。このブレークポイントの下に、タブレットのレイアウトが表示されます(デフォルト:1025px) モバイルのブレークポイント タブレットとモバイルデバイスの間にブレークポイントを設定します。 このブレークポイントの下にモバイルレイアウトが表示されます(デフォルト:768px) 画像 Lightbox すべての画像リンクを Lightbox ポップアップで開き、すべての画像リンクに対し、Lightbox が 自動的に動作します。 詳細 CSS 印刷設定 CSSを独立したスタイルシート(推奨)として含めるか、各ページに含めるかを選択します。 エディター読み込みツールのメソッドを切り替える サーバー構成の競合が発生した場合は、このオプションを有効にします。

詳細を読む »
Wordpress
winmonaye

【エレメンター】マイテンプレート

エレメンターテンプレートライブラリを使用すると、100を超えるデザイナー製のページレイアウトやブロックにアクセスできます。 テンプレートの挿入 ①アイコンをクリック  すると、ページテンプレート、ブロック、または独自に保存されたテンプレートが編集画面から追加されます。 ②テンプレートをプレビューするには、 虫めがねのアイコンをクリックします   。 ③必要なテンプレートを選択するには、[挿入] をクリック します。 ④好きなテンプレートは、♡をクリックすると「お気に入り」に保存されます。 ⑤.json  または  .zip  ファイルをアップロードするには、  右上隅の矢印 をクリックします。 ページをテンプレートとして保存する ①パネルの下部にある緑色のボタンをクリックします。 ②「テンプレートとして保存」を選択 ③テンプレートに名前を付けて保存する。 セクションをテンプレートとして保存する ①保存するセクションを選択し、セクション設定を右クリックします。 ②名前を付けて[保存]をクリックします。 テンプレートをエクスポートする方法 保存したテンプレートをエクスポートすることが出来ます。 ① アイコンをクリックする。 ②  エクスポートしたいファイルのをクリックし、エクスポートします。 テンプレートをインポートする方法 エクスポートまたはダウンロードしたテンプレートをインポート出来ます。 ①アイコンをクリックしてライブラリを開きます。 ② 右上隅の矢印 をクリックします。 ③「ファイルを選択」をクリックし、インポートしたいファイルを選びます。 ④インポートしたファイルが「テンプレート」リストに表示されます。

詳細を読む »
Wordpress
winmonaye

【エレメンター 】ページのプレビューと公開

ページのデザインが終わったら、プレビューで公開内容の確認をする事が出来ます。内容の確認が終わったら、ページを公開をしましょう。 ①プレビューするには[]をクリックします。 ②内容を確認し[ 更新 ] をクリックすると、ページが公開されます。 ③[ 見てみる ] をクリックすると、公開されたページを表示すルコとが出来ます。 下書き保存 エレメンターでは、公開中のページを編集し、[ 下書き保存 ] しながら作業が出来ます。 公開中のページを壊す事なくページの変更が可能です。 ①[ 更新 ]の横にある矢印をクリックします。 ②[ 下書き保存 ]を選択します。

詳細を読む »
Wordpress
winmonaye

【エレメンター 】右クリックを見る

エレメンター バージョン2.1から、セクション・カラム・ウィジェットの編集メニューは「右クリック」で表示されます。 コピー/貼り付け 右クリックすると、コピーと貼り付けの機能が表示されます。コピー/貼り付けには3つのタイプがあります。 要素のコピー/ペースト 要素(ウィジェット、列またはセクション)をコピーし、ページのどこにでも貼り付けることができます。 要素の上にペーストすると、ペーストされた要素がその要素の下に配置されます。 要素スタイルのコピー/貼り付け 貼り付けスタイルでは、コピーした要素のスタイル(ウィジェット、列またはセクション)を貼り付け、他のウィジェット、列またはセクションに貼り付けることができます。 ページ間のコピー/ペースト コピーペーストとコピースタイルは実際にページ間で動作します! 任意のウィジェット、列またはセクションをコピーして、サイトの別のページに貼り付けることができます。 スタイルのリセット 右クリックしてスタイルのリセットを選択すると、すべての要素のデフォルトのスタイル設定に簡単に戻ることができます。 ナビゲータ ナビゲーターはナビゲーションツリーパネルで、エディター上の各要素にワンクリックで簡単にアクセスできます。 ナビゲータを使用すると、ユーザーは要素をページ全体にドラッグして、すばやく簡単に編集できます。 右クリック – ページレベル ドロップ領域の任意の場所を右クリックすると、次のページレベルのオプションが表示されます。 すべてのコンテンツをコピー ページコンテンツ全体をコピーして別のページに貼り付けることができます。 すべてのコンテンツを削除 すべてのコンテンツを削除オプションがページレベルの右クリックに移動しました。

詳細を読む »
Wordpress
winmonaye

【エレメンター】最初のページを作成する

エレメンターの3つの主なビルディングブロック、「セクション」「カラム」「ウィジェット」で構成されています。 「セクション」は最大のビルディングブロックで、「セクション」の内部に「カラム」があり、「カラム」の内部に「ウィジェット」があります。「セクション」「カラム」「ウィジェット」をハンドルで編集します。 編集 セクション、カラム、またはウィジェットを編集するには、ハンドルを右クリックします。 セクション ①をクリックしてセクションを作成するか、をクリックして、ライブラリからテンプレートを使用します。 ②カラムの構造を選択する ③右クリックして編集、複製、コピー、削除など セクションハンドルを使用すると、セクションを追加したり、セクションをドラッグしたり、削除したりすることが出来ます。 カラム ①カラムの幅を設定します。 レイアウトの下で行うことも、カラムの間の破線をドラッグする事でも幅を設定出来ます。 ②カラムを追加するには右クリック>新しいカラムを追加 ③カラムにウィジェットを挿入する。 ウィジェット ①カラム内にウィジェットを挿入する。 ②ウィジェットの幅は、カラムの幅によって設定されます。

詳細を読む »
Wordpress
winmonaye

【エレメンター 】カラムの概要

エレメンターのカラムに関する情報、それぞれのメニューの意味を紹介します。 レイアウト カラム幅(%):カラム幅を設定する  コンテンツ位置:カラムのコンテンツの位置を設定する  ウィジェットスペース(px):ウィジェット間のデフォルトスペースを設定する (デフォルト:20)  HTMLタグ:カラムに HTMLタグを設定する スタイル ▶︎背景(普通とホバー)  背景の種類:クラシック、グラデーションから背景を選択 ▶︎背景オーバーレイ(通常とホバー)  背景の種類:クラシックまたはグラデーションから選択 ブレンドモード:ブレンドモードを設定する。 CSSフィルタ:ぼかし、明るさ、コントラスト、彩度を追加する ▶︎ボーダー(通常とホバー) ボーダータイプ:ボーダータイプを設定する ボダー半径:ボーダー半径を設定する ボックスシャドウ:ボックスシャドウを追加する ▶︎書体 見出しの色 / 文字色 / リンク色 / リンクホバーカラー / 文字の配置:それぞれの色を設定する 詳細 ▶︎詳細 マージン:マージンセクションを設定する パディング:パディングのセクションを設定する  Zインデックス:Z-インデックスを設定します。  開始アニメーション:ドロップダウンをクリックしてアニメーションを選択します。  CSS ID:セクションのCSS IDを設定する  CSSクラス:セクションのCSSクラスを設定する ▶︎カスタムCSS  独自のカスタムCSSを追加する

詳細を読む »
Wordpress
winmonaye

【エレメンター】レスポンジブモード

デスクトップ、タブレッット、モバイルの3つの表示方法の編集が可能です。(デフォルトはデスクトップになっています。)テキストサイズや画像サイズ、画像位置などをデバイス毎に設定する事が出来ます。 編集したいデバイスのアイコンをクリックして設定を編集します。 視認性 デバイスに応じてセクションを表示/非表示にすることが出来ます。 ①[ セクションを編集 ] > [ 詳細 ] ②[ レスポンシブ ] > [ 視認性 ] ③それぞのでデバイスの表示設定をする。 モバイルとタブレットのブレークポイントを変更する モバイルブレークポイントとタブレットブレークポイントの値を設定できます。 ①ダッシュドーボ [ Elementor ] > [ 設定 ] > [ スタイル ]へ行き、モバイルとタブレットのブレークポイントの値を設定します。 ②変更を保存する。 ③ダッシュドーボ [ Elementor ] > [ ツール ] > [ 一般 ] > [ CSSを再生成する ] > [ ファイルを再再生する ] をクリック カラムの表示 ここでは、タブレットやモバイルでのカラムの表示位置をデスクトップの表示位置と逆にするかしないかを選択出来ます。 デバイスのプレビュー パネルの下部にあるレスポンジブモードのアイコンをクリックして、デスクトップ、モバイル、またはタブレットビューの切り替えをします。

詳細を読む »
Wordpress
winmonaye

【エレメンター 】テンプレートの追加

エレメンターには、ページとブロックで使用するテンプレートが用意されています。使いたいテンプレートを選択してワンクリックで任意のページに挿入する事が出来ます。 ①編集画面から、をクリックします。 ②テンプレートをプレビューするには、をクリックします。 ③選択したテンプレートの[ 挿入する ]をクリックするとレイアウトに挿入されます。 ④テンプレートをお気に入りに保存するには、選択したテンプレートの右下をクリックします。 ⑤.jsonまたは.zipファイルをテンプレートライブラリーにインポートするには、右上をクリックします。

詳細を読む »
エレメンターレイアウト
Wordpress
winmonaye

【エレメンター】ページレイアウト

エレメンターのウェブページは「セクション」「カラム」「ウィジェット」で構成されています。それらを上手く使う事で、柔軟で思い通りのサイトを制作する事が出来ます。 ① ページに「セクション」を追加します。 ②「カラム」に「ウィジェット」を追加します。 ③ 鉛筆やハンドルアイコンをクリックすると、各要素を編集してカスタマイズが出来ます。 編集アイコンを使用すると、要素をページの上または下に移動したり、複製、追加、保存、または削除が出来ます。その他にも、スタイルのコピーや貼り付けを行う事が出来るので、スタイルだけコピーしたい時には重宝致します。 また、右クリックを押しても、要素のメニューが表示されます。

詳細を読む »
Wordpress
winmonaye

【エレメンター 】使用するために必要なシステム要件

Elementorの目的は、WordPressで最も速く高度なページビルダーを作成することです。 Elementorを使う為に必要なシステム要件は下記の通りです。 ■ PHP7以上 注:あなたのサイトが古い PHPのサーバーでホストされている場合は、問題が発生する可能性があります。ホスティングプロバイダに問い合わせて、最新バージョンのPHPにアップグレードすることをお勧めします。 ElementorはPHP 5.4以降でも動作しますが、古いバージョンはサイトがセキュリティの脆弱性やバグにさらされる可能性があります。 ■ MySQL 5.6以上 MySQLバージョン5.6以上またはMariaDBバージョン10.0以上 ■ WPメモリー制限 WP 64 MB以上のメモリ量(128 MB以上が推奨) 詳しくは   こちら ■ ブラウザ Safari、Chrome、Firefoxで編集可能。Microsoft EdgeとMicrosoft Internet Explorerでは編集不可。 Elementorで構築されたページは、全てのブラウザで表示されます。 ■ デバイス 携帯電話とタブレットでは編集不可。デスクトップコンピュータの編集可能。 ■ サーバー あなたのウェブサイトがWPエンジでホストされている場合は、問題を避けるためにSSLをウェブサイトに追加する必要があります。

詳細を読む »
ワードプレス
winmonaye

.htaccessをWordPressで徹底活用

先日WordPress brandingとWordPressセキュリティの徹底強化についてご紹介したので、今度はややこしいと巷で有名な「.htaccess」に関してお話したいと思います。ひとしきりWordPressのダッシュボードやプラグイン、テーマなどをいじったら、次はまた大きな一歩を踏み出さねばなりません。まずはこのアーティクルでどんな話をするのか、説明しましょう。 Image credit: ptz0n この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 WordPressのカテゴリページにアクセスすると、以下のようなURLが表示されるかと思います。 個人的にこの「category」という単語はあまり好きではないのですが、WordPressがレンダーしてくるのはこのURLですよね。 「.htaccess」を使えば、この「category」部分を排除して、URLをもっとプロっぽく見せることが出来ます。.htaccessファイルを理解すればもっともっと変更出来る部分は拡がります。 それでは.htaccessファイルをいじる前に基本的なことをおさらいしておきましょうか。 そもそも.htaccessとは? .htaccessは元々はHypertext Accessの略です。コンフィグファイルの1つで、配置されたディレクトリとそれに関連するサブディレクトリを制御する権限があります。独自の機能を制御する為にApache系のWEBサーバーで使用されます。きっと使ってみればすぐに慣れると思いますよ。 NOTE: Windowsベースホスティングの.htaccessファイルはまた全く別の話です。このアーティクルではLinuxベースのホストに関してお話していきます。     .htaccessとApache     .htaccessファイルとApacheの関係を分かり易くする為に、以下の画像を作ってみました。WordPressとWEBサーバ(ここではApache)がどの様な位置関係にあるかにご注目下さい。これは非常にざっくりとした解説でしかないのですが、リアルタイム環境でのデータフローを理解するには充分なのではないかと思います。         上記の画像でご覧いただける通りApacheは.htaccessを経由して進むのですが、Apacheは指示されたものはそのまま持ち込んでしまいます。その為.htaccessは、もし何か複雑な変更が必要な場合でも素人にApacheを触らせないというApacheに対するシールド機能の働きもします。これは言い換えてみると、WEBマスターとしてはhttpd.confを触らずとも.htaccessを編集することによりデータフローや表示結果を変更出来ると言うことを意味します。         では何故直接httpd.confを編集しないのか?     先ほどの説明をご覧いただくと、当然こういう疑問が湧いて来ますよね。このブログをご覧になっている殆どの方は、何らかの形での共有ホストをお使いになっているのではないかと思います。それが何を意味するかというと、1つのサーバがあなたのWEBサイトだけではなく他の多数のWEBサイトをも走らせているということになります。従ってhttpd.confファイルをいじるということは、他のWEBサイトに影響を与える可能性も出てきてしまいます。例えhttpd.confファイルに重要な記述がされていないとしても、他のWEBサイトに影響を及ぼす可能性がある限りホスティング会社はhttpd.confファイルを触らせてはくれるはずがありませんよね。けれど.htaccessファイルを使えば、他のサイトに影響を与えることなくhttpd.confファイルを書き換えたかのような操作をすることが可能となります。これでスッキリしましたか?         ここまでの説明ではっきりしたことをまとめてみましょう。     .htaccessファイルで出来ることは何でもhttpd.confファイルでも実現可能です。 httpd.confファイルで出来ることは何でも.htaccessファイルでも実現可能というわけではありません。 .htaccess編集前に知っておくべきこと .htaccessファイルをさわり始める前に、以下のポイントを押さえておきましょう。 .htaccessファイルには所有者をもドメイン(FTPやcPanelといったツールを含み)から締め出してしまう様な機能もあります。その為、今自分が何をしているのかきちんと把握しながら作業を進めましょう。 ワードラップ機能の付いたエディターを使用している場合は、.htaccessファイルを編集する前にワードラップ機能を無効にすることをお勧めします。Apacheなら問題ないかと思いますが、もしかしたら誤作動を引き起こすことがあるかもしれません。 余分なコード(同じことを目的とした別々のコードセットなど)は避けてください。結果として無限ループを引き起こし、閲覧者が抜け出せなくなる可能性があります。 サブディレクトリへの変更はそのサブディレクトリ内に別の.htaccessファイルを置き、そちらのファイルから特定のコードを削除することにより避けることが可能となります。 RewriteCondを使用する場合は、<IfModule mod_rewrite.c>と</IfModule>の行の間に記述する必要があります。こうすることによりmod_rewriteと呼ばれるApacheの書き換えエンジンを有効化します。もしご利用のApacheでは既に有効化されていたら不要な作業なのですが、ご自身の.htaccessファイルで再度有効化させておいても問題ありません。 いざ.htaccessファイルを開いた時に、既にいくつかのコードが書き込まれている可能性が極めて高いです。これはWordPressのパーマリンク構造に必要なデフォルトなものなので、決して触らないように気を付けてください。参考までに記載しておきますね。 WordPressがルートディレクトリにインストールされている場合 WordPressが「blog」というサブディレクトリにインストールされている場合     変更事項はまずはサブディレクトリでテストしてみてください。 バックアップを忘れずに!WordPressにいかなる変更を加える前に、既存の.htaccessファイルをバックアップする必要性を説いた方がいいですか?答えは「Yes!」ですよね。いくつかのプラグインにはデフォルトに切り替える習性を持っているものがあります。そういった問題を回避する為に.htaccessファイルは必ずバックアップを取っておきましょう。 [adrotate block=”3″]     .htaccessファイルの保護     WordPressのセットアップをリモデルする前に、.htaccessファイルをきちんと保護しておかなければなりません。以下のコードは、外部からの.htaccessファイルに対するいかなるアクセスからも保護してくれます。ファイル名のケースセンシティブのところもきちんと賄ってあるので、ファイル名が.hTACcesSだったとしても、問題なく保護されます。         wp-config.phpファイルの保護     先ほどのコードはWordPress内の重要なファイルはどんなものでも保護してくれます。下記の場合はwp-config.phpファイルを保護しています。         WordPress内のディレクトリを非表示    先日のアーティクルでご紹介した通り.htaccessファイル内で下記のコードを使えば、WordPress内のディレクトリのパブリックビューイングを制限することが可能になります。        こうすることにより変更を加えた特定のディレクトリ内のサブディレクトリへのアクセスをブロックします。         特定のIPアドレスをブロック     もし何らかのIPアドレスがネットワークに障害をきたしていることが分かったら、以下のコードを使ってそのIPアドレスをブロックすることが出来ます。         スパムボットからのコメント拒否     WordPressのwp-comments-post.phpファイル有効時に誰かがコメントを残した場合、ブラウザは関連するラインを戻します。スパムボットがコメントを残した場合はwp-comments-post.phpファイルに直接ヒットするので、関連ラインは生成されません。以下のコードはそのようなスパム活動を検出し、スパムボットにそのまま送り返してしまいます。丁度あなた自身のAkismetを作ってしまうような感じです。         NOTE:4行目のyourdomain.comをwwwを除いたご自身のブログURLや他のプリフィックスに変更してください。         IPアドレスによるwp-adminフォルダへのアクセス制限     wp-adminフォルダはWordPressにとって中核であり、もしハッカーにアクセスされてしまったらそれでもうおしまいです。そのような事態を避ける為に、あなたのIPアドレス以外はwp-adminフォルダへのアクセス権が無いよう制限してしまえばよいのです。以下のコードをルートの.htaccessファイルに書き加え、wp-adminフォルダの中に配置します。こうすることにより変更はwp-configディレクトリ内のみに適用されるようになります。         NOTE:今回の制限を適用させる為には、ISPからの静的IPアドレスが必須となります。また「allow from」という行を加えれば、アクセス権のあるIPアドレスを追加することも出来ます。         ホットリンクの無効化     もし他のWEBサイトが自分のディスクにコピーして再アップロードするのではなく、直接あなたのサーバ上にある画像をそのままソース元とした場合、あなたのディスク容量とバンド幅が消費されてしまいます。これが所謂「ホットリンク」と呼ばれ、貴重なディスクスペースを節約する為にブロックする必要があります。         NOTE:コード内のYourDomain.comは、wwwを除いたあなたのブログのURLに置き換えてください。それからオプションとしてTrustedDomain.comは、ホットリンクを許可したい他のWEBサイトを追加したい場合に置き換えて使ってください。また、http://YourDomain.com/images/HotlinkingNotPermitted.gifの部分は、誰かがあなたの画像をホットリンクした場合に表示される画像です。折角なら彼らの一枚上手をいきましょう。         メンテナンス中の置換ページ表示     テーマブログを変更したり新しいプラグインをテストする必要がある場合、ブログへの訪問者をメンテナンスページへ誘導することをお勧めします。このテクニックは通常、訪問者達にそのWEBサイトがメンテナンス中であることとその予定期間をお知らせする為に用いられます。下記のコードをお使いください。         maintenance.htmlはあなたのWEBサイト上でメンテナンスページとして使用したいページに置き換えてくださいね。それから3行目の数字はあなたのIPアドレスに書き換えるのを忘れないようにしてください。そうしないと自分自身もアップグレード中にメンテナンスページしか表示されないという憂き目をみることになってしまいます。         キャッシュ利用で速度アップ    

詳細を読む »

CSSツール・ジェネレーター お役立ちツール

WEBデザイナーやディベロッパーのみなさんは、WEBサイトのデザインや開発にかける時間をいかに短縮するか絶えず模索していらっしゃるのではないでしょうか。そうすることによりWEBサイト構築の生産性を向上させ、自分の仕事を最大限に活用出来るよう改善していらっしゃるんですよね。ここではみなさんの貴重な時間を節約出来る、数々の優れたCSSツールやジェネレーターをご紹介していきたいと思います。 CSSツールは魔法のランプの様に機能し仕事をシンプル化してくれるので、WEBディベロッパーのみならずWEBデザイナーのみなさんにも不可欠なツールです。ほぼ全ての開発ツールは時間短縮を実現してくれるので、優雅で機能的で高度に最適化されたWEBサイトを近道しながら作り上げることが出来ます。 この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 CSSツールとジェネレーター

詳細を読む »

WordPressのセキュリティを徹底強化

WordPressは今やもうインターネットで利用されている最も有名なコンテンツマネジメントシステムと言って間違いないかと思います。最初の頃こそ様々な批判を数多く受けましたが、Automattic社はその度にきちんと問題解決を行ってきました。ほどなくしてWordPressは有名なコンテンツマネジメントシステムの成長をサポートしてきた多数のブランドに採用されました。オープンソースであることは、ハッカーからの攻撃に対し脆弱性があるともいえます。その為WordPressで作られてサイトのWEBマスターは、セキュリティ上の問題を決して軽視してはいけません。 この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 私自身過去5年間ブロガーとして過ごしてきて、所有者の視点からのブログの重要性を理解しているつもりです。今回の記事では読者のみなさんがWordPressのセキュリティ問題への理解を深め、またどのように対処したらよいか理解するお手伝いが出来たらと思っております。そして今後もこのシリーズは続けていくつもりです。 注意書き: この記事にあるテストを始める前に、必ずWordPressブログのバックアップを取って下さい。かわいい我が子の挙動がおかしくなったら困りますものね。(その際、後述するWP Security Scanプログインを使用してください。) この記事ではプラグインの使用方法のみならず、手動で実行する方法も記述していきます。読者のみなさんは卓越したWEBマスターたちは、WordPressで全てのタスクをこなす為にプラグインに頼ったりしないと言うことを覚えておかなければなりません。また複数のプラグインを使用すると空きメモリを喰うので、動作が遅くなる傾向があることも覚えておきましょう。最後にWEBマスターたるもの、知識領域を増やす為に手動での方法をも試すべきだとも思いますよ。    WordPressのセキュリティ強化    初めに・・・(自動インストールは無しです) ホスティング企業はWordPressのインストールを非常に簡単なものにしました。今の今まで一度もコーディングをしたことが無いような人でも、あっという間にブログをアップすることが出来ます。ホスティング企業はWordPressのインストールを超簡単にするためにFantasticoとcPanelのようなツールを統合しました。そのようなツールはパッと見とても有効に思えますが、WEBマスターにとって本当に有益であるかはまだ証明されていません。 手動でWordPressをインストールすると、データベース内のテーブルに自分の好きなプレフィックス(接頭辞)を付けることが出来ます。ちなみにデフォルトでは全てのテーブルにwp_というプレフィックスが使われており、このプレフィックスを変更しなければ、ハッカーのお仕事を半分手伝ってしまったことになります。その為自分で変更したカスタムプレフィックスをお使いになることをお勧めします。この作業は後述するプラグイン、または手動でのWordPressインストール中にwp-config.phpを書き換える事により可能となります。 それでは、インストールを始める前にwp-config.phpを開き、コードを下記の様に別のものに変更して下さい: ↓自分の好みのプレフィックスに変える↓ 既に稼働中のブログを変更する場合、wp_プレフィックスを変更するには以下の様に2つの追加作業が必要となります。 1. phpMyAdminを使ってWordPressデータベースにログインし、全てのテーブルネームをカスタムプレフィックスに変更してください。 2. 「optionsテーブル」と「usermetaテーブル」内の幾つかのフィールドでもwp_プレフィックスが使われている可能性があるので、以下のクエリーを走らせてプレフィックスを変更してください。 お役立ちプラグイン WP Security Scanというプラグインはデフォルトのwp_プレフィックスを別のものに変更してくれます。インストールした後に「Security」>「Database」へ進んでインストラクションに従ってください。    スパマー対策「Akismet」 あまりに有名過ぎるアンチスパムプラグインAkismetのことをご存じない方はいらっしゃらないかとは思いますが、この先Akismet無しで進むことは、スパマーたちに対して「さぁどうぞ私のブログにスパムコメントを書き込んでください!」と両手を広げて歓迎しているような状態になってしまい非常に危険なので、念のためここに書いておきますね。Akismetは必須です!!    「SALT」 SALTはWordPressのパスワードのセキュリティを強化するシークレットキー認証方式です。パスワードをソルトすると、ここで生成される複雑なハッシュ文字列(ここではページがリフレッシュされる度に、ランダムハッシュ文字が生成されています。)を付加することにより、ブルートフォース攻撃からWordPressのインストールをを保護します。データベース証明書のすぐ下にある8行のコードをwp-config.phpファイルにコピーして下さい。これだけで完成です♪ まず、もしWordPress 2.5かそれより新しいバージョンのWordPressをインストールして使っているのであれば、wp-config.phpファイルにシークレットキーが既に存在するはずです。そのデフォルト値はハッカーたちに知れ渡っているので、この値も変更すべきです。次に、元々WordPress 2.5より古いバージョンのWordPressを使っていて、それをアップデートして今でも使用しているのであれば、wp-config.phpファイルに手動で追加する必要があります。 お役立ちプラグイン Chap Secure LoginプラグインはWordPressログインをまた別の方法で保護します。プラグインを有効にした後、暗号化されないで転送される文字列はユーザー名のみです。パスワードは複雑なMD5アルゴニズムでハッシュされます。またゼロ設定のプラグインであるため、コンフィグ変更を行う必要もありません。 注意書き: インストール後の初回ログイン時は必ず失敗しますが、2回目は成功します。なので、プラグインのインストール後の初回ログインに失敗しても慌てず、もう一度パスワードを入力してください。    ログイン試行制限 WordPressのログインセキュリティに関して論ずるのであれば、セキュリティ強化の為に別の機能を追加するというのは、なかなか良いアイデアだとは思いませんか。Login LockDown WordPress pluginプラグインは、WordPressブログへのログイン試行を失敗した特定範囲のIPアドレスをブロックします。このプログインは3回ログインに失敗すると、IPアドレスを1時間ブロックします。この機能はオプションパネルで変更が可能で、管理者には必要に応じてブロックされたIPアドレスを解放するアクセス権があります。    パスワードチェック機能 Login WordPress Password Checkerは複数の筆者がいるブログに便利なプラグインです。このプラグインは、新しいユーザーがパスワードを作成する際に、定義されたリストと照らし合わせ、リスト上のパスワードの使用を禁止します。これにより新しいユーザーが推測されやすい簡単なパスワードを作成することを防ぐことが可能です。 プラグインディレクトリのdictionary.txtファイルにパスワードを追加することも出来ますが、パスワードデータベースが増加すると応答時間も長くなることも頭に入れておいてください。    デフォルトユーザー名のadminは使わない もし私があなたのWordPressインストールをハッキングしようと思ったら、まずWordPressインストール時に使用されるデフォルト値から攻めていきますね。そしてもしあなたがインストールする際にデフォルトユーザー名の「admin」を管理用にそのまま使用されていたとしたら、もう私の仕事は半分は終わったようなものです。あなたのユーザー名は分かってしまっているので、後やらなければならないのはパスワードを推測する事のみです。 管理者ユーザーの変更方法 新しく管理者権限を与えるユーザー名を作成する。 「admin」ユーザーを削除する。 任意のユーザーを削除する前に、削除するユーザーが所有していた投稿やリンクをどのようにするかとWordPressが確認してくるので、「Attribute all posts and links to(すべての投稿とリンクを次のユーザーに割り当てる)」を選択する。    次回「admin」を使ってログインを試みても、もうアカウントは削除済みで存在しないのでお気を付け下さいね。    wp-config.phpファイルの保護 wp-config.phpファイルはWordPress インストールで最も大切なファイルの1つです。このファイル内には、ハッカーがWordPressデータベースへアクセスするのを容易にしてしまうような重要な管理権限が含まれています。その為、.htaccessファイルに以下のコードを加えて下さい。 .htaccessファイルはwwwのルートディレクトリにあるはずです。もしそこに無かったらファイルを新規作成し、上記のコードを追加してください。    ディレクトリ一覧の非表示 先ほどwp-config.phpを保護しましたが、それだけではまだまだ足りません。WordPress インストールには沢山のディレクトリがあり、ちょっとデキるハッカーならば簡単にアクセス出来てしまいます。.htaccessファイルに下記のコードを加えて、パブリックからの閲覧を不可能にさせましょう。 この変更を行うと、変更を行った特定のディレクトリの内のサブディレクトリへのアクセスを無効にします。    パスワード強度の確認 先ほどWordPress Password Checkerのプラグインのところで、他のユーザーが予測されやすい簡単なパスワードを使うことを制限する方法を説明しましたが、こちらのプラグインで更に一歩セキュリティ強化を図れる事間違いなしです。基本的な考え方としては、管理者パスワードにはガールフレンドの名前なんて使わないように!ということです。責めているわけではありませんよ。みんなやることです。 WP Security Scanプラグインは既にインストールされているかと思いますが、ダッシュボードの「Security」オプションメニューの下に「Password Tool」オプションがあるかと思います。それをクリックするとパスワードツールの以下のような画面が表示されるはずです。 強力なパスワードを生成して、何度も忘れてしまうことが無いようにどこかに保存してください。ちなみに上記の画像で赤で表示されているパスワードに意味はありません。     WP_head部分からバージョン情報の削除 WP Security Scanプラグインを既にインストールしていればもう準備万端ですが、1つ確認しておいた方がよいことがあります。WordPress 2.6以降の場合、WP_head部分に自動的にバージョン情報が記されてしまいます。これにより何か問題が発生すると言うことはありませんが、ハッカーに使用バージョンを知られてしまうとハッキングの脆弱性も増してしまうと言えるでしょう。WP Security Scanプラグインは、何も変更を加えなくとも自動的にWP_head部分からこのバージョン情報を隠してくれます。 プラグインインストール後はこのように表示されているはずです。 注意書き: もしあなたが洞窟の奥の方か何かに住んでいて、2.6よりも古いバージョンのWordPressを使用していたとしたら、使用中のテーマから手動でバージョン情報を削除する必要があります。header.phpファイル(Appearance > Editorで見つかるはずです)内で、下記のメタタグを見付けて削除して下さい。もし該当のメタタグが見当たらなかったらラッキーです♪    複数ユーザーへの権限割り当て 今回のステップは複数のユーザーがいるブログにとって非常に重要です。ブログが成長してユーザーの数も増えてきたら、それぞれのユーザーに与える権限をきちんと分析しておいた方がよいでしょう。そして以下のどのプラグインを使用するか選ぶ時期が来たと言えるでしょう。 以前branding our WordPress dashboardという記事で取り上げたプラグインを思い出してみましょうか。Adminimizeは視覚的に変化を与えるだけではなく、あなた自身のダッシュボードだと言う気分にさせてくれます。このプラグインは素晴らしくて、複数ユーザーそれぞれがダッシュボードのメニューやサブメニュー内でどんな作業が出来るのか有効化(もしくは無効化)させることが出来ます。このプラグインを使えば、ほぼすべての機能を有効化(もしくは無効化)させることが出来てしまいます。 注意書き: Role

詳細を読む »

WordPressのカスタムテンプレートを使って、異なるサイドバーを含むレイアウトを作成

WordPressとはWEB上で使われている最大規模のブログプラットフォームの1つで、その知名度の成長とありがたいほどの柔軟性により、静的なWEBサイトのCMSとしての使用される機会も非常に増えています。     そのようなサイトは主にWordPressのページ機能を中心に構築されておりますが、「ニュース」や「ブログ」ページを作成する為などに、特別カテゴリーの投稿表示を可能にさせておいた方が都合がよいこともあります。今回のアーティクルではカスタムサイドバーやサムネイル等を含め、WEBサイト上でブログページを作成する為のカスタムテンプレートの使い方についてご紹介していきます。     この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 今から作成するもの 画像は一見にしかずなので、それでは作成したい内容をざっと見てみましょう。 まずWEBサイト内に、2つのページを作成します: 左の「Normal page」では、例として「home」と「about」と言うページを作りたいと思います。実際にページ上で表示させたい項目は以下の通りです。 ページコンテンツ 検索ボックスとカレンダーで構成されたサイドバー 右側の「My Blog(or news) page」で表示させたい項目はこちらです。 「ブログ」と名付けるページ内容 最新投稿リスト(1ページに付き3つの投稿と一部のサムネイル) ブログ記事に関連するカスタムサイドバー(RSSリンクとカテゴリーリストから構成) たたき台が完成したので、早速コーディングから始めていきましょう! 「ブログ」WordPressページテンプレートの作成 まずは先ほどのレイアウトを使いこなす為に、ブログ用の独自のページテンプレートを作成する必要があります。こちらがテンプレート用の全コードです。「blog.php」という名前で保存してください。 それではこれから1つ1つ説明していきましょう。 テンプレートの名前 一行目にはテンプレートの名前を書きましょう。 この「blog_in_blog」の部分はダッシュボードの「ページ属性」>「テンプレート」の下の所に表示されます。(後程詳しく説明しますね。) ページ内容にの取得 次に「ウェルカム」メッセージページの内容を取得させています。 基本的にはpage.phpに書かれているコードと同じコードです。 投稿の取得 さてではテンプレート内で一番面白くて重要なパートに移りましょうか。下記のコードで投稿部分を取得します。 ここで使用しているquery_posts()ファンクションでは2つのパラメータを使用しています。1つ目は表示させたい投稿のカテゴリーIDでもう1つはページごとの投稿数です。文章で説明すると「カテゴリー3と4と5に割り当てられたすべての投稿を、デフォルトの年次順で、1つのページに付き3つずつ表示させなさい」と指示していることになります。勿論カテゴリーIDはWordPressのインストール自体に依存します。query_postsのパラメータを変更する事は可能ですが、今回の例では1ページ毎に3つずつで丁度いいのではないかと思います。 これらの投稿を表示させるには、get_template_partファンクションでループのデフォルトアーカイブパートを使用します。これにより55文字の抜粋部分と「続きを読む」リンクが表示されます。 ブログページへのテンプレートの割り当て 次のステップは先ほど作成したばかりのテンプレートをブログページに割り当てることです。まずはタイトルブログを作成して、素敵なウェルカムメッセージを書き込みましょう。 それから右側に行って、「ページ属性(Page Attributes)」パネルの「テンプレート(Template)」のドロップダウンメニューから「blog_in_blog」を選んでください。 ページを保存すると、以下のような感じで表示されているはずです。 ちょっとこれではみすぼらしいので投稿サムネイルを加えて、もう少し魅力的なページにしていきましょう。 投稿サムネイルをブログページへ追加 投稿サムネイルの有効化 WordPress 3.0+では投稿サムネイルはあまり簡単なものとは言えません。デフォルトテーマのTwenty Tenをお使いのみなさんの場合は投稿サムネイルは既に有効化されています。この機能が存在するかどうかを確認する為にはfunction.phpファイルを開いて下記のコードがあるか見てみてください。 もし上記のコードがfunction.phpファイルに無かったら、単純ですが、追加しておきましょう。 アイキャッチ画像パネルの追加 デフォルトではそのテーマでサムネイルが有効化されたら、投稿エリアの右側のパネルに「アイキャッチ画像(Featured Image)」が追加されることになっています。 「アイキャッチ画像を設定(Set featured image)」をクリックしてファイルを選択し、「投稿に挿入(insert into post)」ではなく「アイキャッチ画像として使用(Use as featured image)」をクリックします。それから「全ての変更を保存(save all changes)」をクリックしてメディアパート部分は完了です。もし全てうまくいっていたら、アイキャッチ画像パネルに画像が表示されているはずです。次にすることはテンプレートでの画像表示を有効化させることです。 ブログテーマにサムネイルを追加 ここで少しblog.phpファイルに戻ってみましょうか。投稿を表示させる為にループのアーカイブテンプレートパートを使用しました。なので今度はサムネイルをloop.phpに追加する必要があります。 アーカイブに関する行を探しているので、開始行から探してみましょうか。 抜粋記事にならないようにサムネイルを追加するにはthe_post_thumbnail()ファンクションを利用しましょう。 初めの配列(array)で80×80ピクセルの画像サイズを与えています。2つ目の配列(array)では画像用のクラスとalt属性(他の属性に関してはコーデックスをご参照ください)という、ファンクション上で使用可能ないくつかのデフォルト属性を使用しています。 サイドバーのセットアップ 投稿部分も終わってサムネイル部分も終わったので、次にするべきことはサイドバーのカスタマイズです。最初に少し触れましたが、今回2つのサイドバーが必要ですよね。1つはWEBサイトの「Normal page」用でもう1つは「My Blog(or news) page」用でしたね。 ウィジェットエリアのセットアップ Twenty Tenテーマには3つのサイドバーのウィジェットエリアと、4つのフッターが付属しています。管理画面の「外観(Appearances)」>「ウィジェット(Widgets)」にはサイドバーを作成する為のエリアが2つあります。「primary widget area」は固定ページ用に使用する予定なので、検索ボックスとカレンダーウィジェットを追加しましょう。「secondary widget area」はブログページやアーカイブ、投稿ページ用に使用するので、RSSリンクを表示させる為のfeed text link widgetとカテゴリーウィジェットを追加しましょう。 サイドバー表示の為に条件分岐タグの使用 「blog.phpテンプレートを使用して投稿したら2つ目のウィジェットエリアに表示され、それ以外のテンプレートを使って投稿したら1つ目のウィジェットに表示される」と言うような、とてもシンプルな指示をWordPressに出したかったとしたらどのようにしたらいいと思いますか。あ、それとカテゴリーは投稿にリンクされているので、カテゴリーも2つ目のウィジェットに表示させたいですよね。 ではまずは使用するコードを見てみましょうか。 まずはwp_reset_query();の部分ですが、ページが呼び出された時にクエリーを元の状態に戻すものです。ページ間での衝突を避け条件分岐タグを問題なく動作させる為に必要となってきます。 サイドバーの中核、条件分岐タグに移りましょうか。まず初めにblog.phpテンプレートをブログページに使用したかどうか検出する為に、is_page_template(‘blog.php’)を使用します。is_page_template()という条件分岐タグは、PHP用の拡張子(.php)で保存されているファイルを使用する必要があり、それ以外だと動作しません。また2つ目のサイドバーにカテゴリーを表示する為に、is_category(3,4,5)とis_single()を使ってチェックしています。あとは2つ目のウィジェットエリアを取得する為のコードを記述しています。 1つ目のウィジェットエリアはそれ以外の全てのページで使用されるので、条件のその他の部分に記述します。完成するとこのようになるはずです。 終わりに・・・ さて、これで完成です!今回はWordPressのカスタムテンプレートを使って、カスタムサイドバーのある固定ページとブログページがある基本的なWEBサイトを作成する方法をご紹介しました。勿論コードは改善してテーマに沿った調整する必要はありますけれどね。 カスタムサイドバーなんて必要ないし、もっと簡単なものが作りたい!と言う方は、特定のページを全ての投稿を表示する為のフロントページとして使用することが出来ます。これは「設定(Setting)」>「表示設定(Readings)」で固定ページにチェックを入れ、特定のページを投稿のフロントページと設定することが出来ます。あとはblog-in-blogと言う面白いプラグインを使うと言う手もあります。

詳細を読む »

WordPress 3.0のテーマをゼロから作成

WordPress 3.0のリリースで、人気のコンテンツ管理システムに多くの新機能が実装されました。 今回のチュートリアルではこれらの新機能の全てを活用していただくために、ゼロからWordPress 3.0テーマ(テンプレート)のコーディングの仕方をブログ対応やミニマルテーマも含めご紹介したいと思います。 この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 ワークステーション設定 チュートリアルを開始するにあたり、まずはご使用いただいているコンピュータへサーバ設定をする必要があります。Windowsの場合はXAMPPやWAMP、Macの場合はMAMPなどがよいかと思います。これらのツールによりローカルテスト環境でWordPressのテストをすることが可能となり、プロジェクトの最中にいちいちFTPを使ってファイル転送する必要は無くなります。 コード編集に関しては、Notepad++のご使用を強くお勧めします。シンタックスがハイライト表示されたり、コーディング用のユーザーインターフェースも非常にシンプルでクリーンであったりと、あくまで私の好みである部分が強いのですが、とても使い易いと思います。(それに無料に勝るものはありません!)他にもNotepadやNotepad 2も同様に使い易いと思いますよ。 必要なフォルダとファイルの準備 WordPressインストールを含むフォルダ内で、wp-content/themes/に移動し「New 3.0 Theme」というフォルダを新規作成し、今後このチュートリアルで作成するファイルは全てこのフォルダの中に収納するようにしてください。では下記の画像の様にファイルとフォルダを追加してください: ステップ1-Style.css sytle.cssにはWordPressテンプレートをスタイリングする全ての要素を書き込みます。けれどまず最初は各テンプレートの名前と、著者名とリンク、そして説明とバージョンを宣言しておきましょう。WordPressテーマ作成時には、テーマを動作させるには必ず2つのファイルが必要になると言うことを覚えておいてください。1つ目はこのstyle.cssファイルで、もう1つは今から作成するindex.phpファイルです。 これらのインフォメーションはいつでも変更が可能ですが、作成された定義に影響を与えないようにきちんとコメント内に記述されているか気を付けるようにしてください。 それでは後程テンプレートのPHPファイルに実装する基本的な定義を記述していきましょう。 タグでは単純にWEBサイト上で使用されるフォントの指定や、(自分の好みに応じて)背景色の設定を行ってください。それからテーマに沿って、リンクのスタイル属性の設定やヘッダーの設定も必要です。 #wrapperはWEBページ全体をカバーし、#headerはその字の通りヘッダー部分、#blogは最新のブログ投稿をカバーしており、最後に.sidebarと#footerも、それぞれ与えられた範囲の基本的な定義をしています。こちらに関してはまた後程詳しく説明しますね。 ステップ2-Header.php 次にheader.phpを作成します。現時点ではWEBサイトのロゴとカスタムナビゲーションまで設定しましょう。 全て詳しく説明する必要はないかと思いますが、上記のコードはあなたが作成するテーマのheader.php全てに必要であると言うことだけは、覚えておいてください。 初めにDOCTYPEの宣言し、WordPressの設定で入力したWEBサイト名を表示させるためのスタンダードを使用します。それからWordPress 3.0のスレッドコメントを有効にするstyle.cssとPHPを記述します。 ステップ3-カスタムナビゲーションの追加 ここまででheader.phpに、基本情報とブログの名前をコーディングしました。次にWordPress 3.0で導入された新機能のカスタムナビゲーションメニューを追加しましょう。実際にheader.phpにコードを追加する前に、まずはfunctions.phpを開いてカスタムメニューを有効にするために必要なコードを追加します。 1つ目の方のコメント部分のコードからお分かりいただけるかと思いますが、add_actionはカスタムメニューへのサポートを追加するために使用されており、次にカスタムメニューを「プライマリーメニュー」と名付けて登録しています。さて、ではテーマにメニューを実装するための作業に移りましょう。 そうするためにはまずheader.phpの末尾に以下のコードを追加する必要があります。 これが何を意味するかと言うと、使用されている主な機能は「wp_nav_menu」と、「sort_column」「container_class」「theme_location」です。「sort_column」の働きはと言うと、WordPressのダッシュボードの選択順序がきちんと守られているかを確認します。「container_class」はメニューをスタイリングするために作られたCSSクラスを、選択することを可能にします。最後に「theme_location」は、(現時点ではprimary-menuのみですが)私たちが選んだ場所にメニューを配置することを可能にします。 ステップ4-カスタムナビゲーションのスタイリング カスタムヘッダーナビゲーションを実行しておりますが、現時点では何の変哲もない古めかしいリンクのリストと言う感じで面白くありませんよね。これを修正するにはstyle.cssにnavというクラスを追加します。 .navファイルでご覧いただける通り、ナビゲーションの幅や、背景色、アライン設定、ディスプレイ設定など基本的な宣言を幾つかしています。それからリンクの前に黒丸が出ないように、基本的なULリストの設定もしています。リスト自体は左側にフロートし、相対位置設定もしています。 それではリンクとドロップダウンメニューにスタイルを追加することで、ナビゲーション全体のスタイル設定を完成させましょう。 まずはメニュー部分のリンクをスタイリングすることから始めており、ここからドロップダウンメニューのスタイリングに入ります。「.nav ul ul」の部分では絶対位置設定をし、トップの位置は100%としています。こうすることにより親リンクの直下に配置することが出来ます。更にドロップダウンリンクを少し目立させる為に背景色も変更しています。そしてZインデックスを99999にすることにより、その下に何があろうとこの要素が他のどの要素よりも一番トップに位置するよう設定しています。 3つ目のドロップダウンメニューでも違いを出す為に、再び背景色をほんの少しだけ変更しています。配置自体は左側に100%です。これにより1つ目のドロップダウンよりもずっと右寄りに表示されます。トップの設定は30%としており、こうすることにより2つ目のドロップダウンと接しているけれども、メニュー全体からは下にずれて表示されます。 最後にドロップダウンメニュー用のリンクをスタイリングします。同様にユーザーがリンクとドロップダウンをホバーした時に、ナビゲーションがどのように表示されるかということも設定します。 ステップ5-Index.php Index.phpはWEBサイトのホームページであり、後述するヘッダーやフッター、サイドバーや最新投稿ブログを表示させるためのコードなどを含んでおり、WordPress 3.0の投稿サムネイル機能を利用しています。 以下のコードはテーマファイル内のどこに配置しようとも、「header.php」「sidebar.php」「footer.php」内の全ての情報をアウトプットする為に使われています。 それ以外はここに書かれているコードは極めてシンプルなものです。header.phpを呼び出した後に少し前に作成した#blogを使い、WordPressブログの最新投稿を表示する為に使うループを呼び出しています。その後で投稿タイトルを、やはり事前に作成しておいたスタイルでラップしています。   WordPress 3.0の投稿サムネイル機能をどのように活用するかということは、<?php the_post_thumbnail(); ?>が担っています。そこに書かれているように、このコード自体は次のステップで説明するfunctions.phpの機能をアクティベートするまでは何もしません。 ステップ6-投稿サムネイルを有効にする 先ほどホームページ上で投稿サムネイルが表示されるよう、コードを追加しましたよね。けれどまだその機能をアクティベートしていないので、実際には何も変わっていません。ではここでfunctions.phpを再び開いて、下記のコードをメニューナビゲーションコードの後に来るように追加しましょう。 上記のコードはもうそのものずばりで、書かれている通りの働きをします。二行目のラインで投稿サムネイルへのサポートを追加しており、三行目はサムネイルの厳密なサイズを定義しています。このアーティクルでは横幅520ピクセル、高さ250ピクセルで設定しました。 ステップ7-Sidebar.php ご想像がつくかと思いますが、sidebar.phpはサイトバーで表示させたい情報全てを賄うファイルです。index.php上でsidebar.phpを取得する為のコーディングは既に済んでいるので、今しなければならないことはsidebar.php内に必要情報を追加することだけです。そうすればホームページ上にサイトバーが表示されます。 そうですね。上記がsidebar.phpが機能する為に必要な全てのコートですね。style.cssで作成したdivを呼び出し、その後に続くコードで、WordPressのバックエンドを経由して希望する順番と方法でウィジェットをサイドバーに追加することが出来ます。しかしながら、他の多くの機能と同様に、正常に動作させるためにはfunctions.phpファイルを多少書き換える必要があります。 このコードは、先ほどのsidebar.phpを登録するようWordPressに指示しています。WordPressではもし希望するなら、複数のサイドバーをいとも簡単に取り扱うことが出来ます。けれどこれ以上書くと、この長いチュートリアルが更に長くなってしまうので、もしご興味があればGoogleサーチしてみてください。 ステップ8-Single.php single.phpは、シングルポストページ用に使用するもので、index.phpで書いたコードと殆ど同じです。唯一の違いと言えば、「comments-template」DIVタグとcomennts.phpを読み込むコードを追加したことくらいです。 ステップ9-Comments.php WordPress 3.0のリリースに伴い全WordPressテーマを通してコメントフォームの標準化を進める事は、フックを介して変更することが可能となるのでテーマ作者やプラグイン開発者にとって非常にやり易くなりとても意味のあることです。 以下のコードは各テーマテンプレートにcomments.phpファイルを追加する為のコードです。 このコードにより、テーマに沿った形でコメントフォームが表示されます。もしコメントフォームの更なるカスタマイズにご興味をお持ちでしたら、こちらのWordPress 3.0 Theme Tip the Comment Formというサイトをチェックしてみてください。 ステップ10-Page.php WordPressでページを作成すると、タイプした内容を表示するには別のファイルが使用されます。そのファイルがpage.phpです。コード自体はsingle.phpとほぼ同じなのですが、このページではコメントテンプレートは省略したいのと、投稿ナビゲーションに少し変更を加えたいのでその辺りが少し変わってきます。けれどそれ以外は全く同じです。     ステップ11-Category.php category.phpはユーザーが「特定の投稿カテゴリー」や「投稿時間」「特定の著者」を見るたびに、投稿を表示させる為の情報を提供するファイルとなります。先ほどのpage.phpと同様にコードの殆どがsingle.phpと同じですが、最初の部分だけ少し異なります。 このコードが追加された部分で、WordPressループのすぐ後ろに追加されています。 このコードの役割は、現在ブログのどこを参照しているかを表示する為に大量のPHPのif/elseifステートメントを処理することです。なので例えば「Test Category 1」という特定のカテゴリーを見ているとすると、他のポストより先にまずH2ヘッダーの「Archive for the ‘Test Category 1’ Category:」を表示してくれます。これは一定の日付や著者などに対しても同じ働きをしてくれます。 ステップ12-背景のカスタマイズとリンクフィード 以前少し触れた通り、WordPress 3.0で実装された機能の1つとして、WordPressのバックエンドを通して画像だったり基本色だったりと背景の作成や変更が可能になったということが挙げられます。 この機能を完全に動作させる為に必要なのは、このたった1行のみです: このようにして、背景のカスタマイズが有効となります。次に同じくらいシンプルなコードを追加します。そうすることにより、関連するリンクフィードがサイト上どこでも使用できるようになります。標準のフィード、コメント、タグ、カテゴリーなどを追加コード無しでヘッダーに加えることが出来ます。 この機能が本来の働きを問題なく出来るように、下記のコードをfunctions.phpに追加しましょう。 ステップ13-Footer.php 今までの作業を全て完成させる為に、footer.phpファイルを作りましょう。このファイルではstyle.cssで宣言した#footer IDを使用し、基本的な著作権情報や一番下にある最新ストーリーやコメントのRSSフィードリンクを含んでいます。 ステップ14-その他の機能 ここでは、あまり重要ではないけれど、知ってると便利かもしれない機能を紹介したいと思います。WordPress 3.0のマルチサイト機能で、1つのWordPressをインストールしただけで複数のブログを所有することを可能にします。これもfunctions.phpに追加したいと思います。 まとめ この時点で下書きからWordPress 3.0のテーマを完成させているのではないでしょうか。しかもとても人気のある機能を搭載し、かつ必要最低限のままなので、今後もっとグラフィック的に印象を与えるサイトへと変貌させることも充分可能です。他にこのテーマを使ってどんなことが出来るでしょうか。テーマを変更するだけの基本的なオプションとスタイルは備わっているし、サイドバーを更に追加することだって、How to Create a Better WordPress Options Panel のサイトを使って管理パネルを作ることだって出来ます。

詳細を読む »

HTMLタグにIDやクラスを指定するワケ

読者のニコラスさんからの投稿です: <body>要素や<HTML>要素内で、IDやクラスが使われているのをよく目にするのですが、何故この様なことをする必要があるのでしょうか。どちらの要素もファイル上1つしか存在しないはずなので、bodyやhtmlをCSSで直接装飾したらよいのではないでしょうか。 ニコラスさんがおっしゃっているのは、おそらくこういうことではないかと思います: ただ下記の様にして、クラスネームを省略してしまったらいいのではないかと言うことですよね: 結局HTMLファイル上に、<html>要素は1つしか存在しませんものね。 ニコラスさんのおっしゃることはよく分かります。確かにWEBページのソース表示を見てみると、<html>タグ内に余計なクラスやIDが記述されているのを見かけることがあります。しかし実際、これらのトップレベルのクラスは非常に便利なんです。それではセオリーの復習と、実際の例をいくつか見てみましょうか。 この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 多数のページ、少数のCSSファイル CSSの基本的な考え方は、マークアップからデザイン部分を抽出することです。100を超える全てのページが同じCSSファイルを共有することだってあるのです。これは様々な理由から、きわめて効率的であると言えるかと思います。まず1つ目の理由として、デザインの変更が必要となった時、100ページそれぞれを修正するよりも、一発修正出来た方が楽に決まっています。トップレベルのクラスはどのページが現在表示されているのか識別するのに役に立ち、またその他のページとは異なるスタイリングを施すことも可能にします。 異なるページで、同じCSSを共有し、異なるデザインを施す。そして最高レベルの要素で発生していることなので、ページ全体のデザインは、個々のクラスを使用して設定することが出来ます。(よろしければ過去のアーティクルもご参照くださいね。) WordPress WordPressのパワーサイトでは、ページを表示するためにテーマを使用します。サイト上の全てのページはアクティブなテーマから作られています。このテーマには「header.php」と呼ばれるファイルがあり、全てのページの上部(doctypeやhead、bodyやhtmlのオープニングタグなど)を出力しています。また、WordPressには「body_class()」というファンクションがあり、こちらはロードされているページの種類に応じて、多数のクラスを出力してくれます。殆どのテーマに下記のようなオープニングボディタグがあります: シングルポストのページでは、この様な出力になるかと思います: ホームページの場合は、この様な出力になるかと思います: このお陰でCSSで使用可能な多数のフックが出来るので、ページの種類に応じて個別設定が可能になります。 html要素を直接スタイル設定することが出来るのに、何故WordPressが「body_class」と呼ぶのかよく分かりませんよね。そうなんです。この機能をhtml要素に適用させることが出来るんですよ。 Modernizr Modernizrは、JavaScriptライブラリで、こちらもトップレベルのクラスを追加してくれます。ロードされ実行される時にクラスを動的にhtml要素に追加します。クラスは現在のブラウザの機能を象徴しており、WordPressが適用させてくるクラスは、個々のページをそれぞれ別々に設定することを可能とするクラスであり、Modernizerが適用させてくるクラスは、ブラウザの機能に応じて同じページが異なって見えるように使用出来るクラスです。 Modernizr使用後のhtml要素はこのような感じになります: なのでCSSを使って、機能に応じて異なる設定をすることが出来ます: その他には? もしこの他にもトップレベルのクラスの使用方法をご存知でしたら、是非教えてください。

詳細を読む »
チュートリアル
winmonaye

WordPress : カテゴリーによって記事のページデザインを変更する

WordPressは簡単に目的にあったようなシステムにできるので、とても気に入っています。 今回は、今作っている情報系サイトでつかった、カテゴリーによって記事のデザインを変更する方法を紹介します。これができることによって、例えば、ビデオの紹介ページ用のレイアウトとは別に本紹介ページレイアウトを変更するといったようにデザイン/レイアウトをカテゴリー別に簡単変更することができます。 これと、後に紹介予定のCustom Fieldを合わせ使うことで、簡単にビジネスディレクトリーや本やビデオなどのレビューディレクトリーなどがつくることができます。 さーあそれは、早速やってみましょーーう、えーとまずは、 1.自分のtheme内にあるFunctionファイルを開いて下記のコードを入れてください。 [/php] add_filter(‘single_template’, create_function(‘$t’, ‘foreach( (array) get_the_category() as $cat ) { if ( file_exists(TEMPLATEPATH . “/single-{$cat->term_id}.php”) ) return TEMPLATEPATH . “/single-{$cat->term_id}.php”; } return $t;’ )); そして、ページのデザイン/レイアウトのページを、single-(category-id).php 例:single-8.php といったように名前を付けて作ってください。そして、、これでお終い。 はい。これでもしカテゴリーID”8”の内のページを開いたら、single-8.php のレイアウトに沿って表示されます。 このコードは、どこかのサイトで紹介されたものです。Function内に直接コードを使う方法以外にも、Pluginなどもありますので、是非探してみてください。

詳細を読む »

WordPress Excerptの文字数をプラグイン使わずに好きな数に簡単に変更

WordpressのExcerpt は、抜枠に書いた文書若しくは本文の一部をデフォルトの(たしか)55文字にしてテンプレートに表示させれるとても使い勝手がい いテンプレートタグの一つです。 ただ、デフォルトで指定する文字数では、都合が悪い場合もあります。実は、簡単なPHPで本文の文書の文字を指定した数だけ抜きとれます。それでは、早速やってみましょうか。 ますは、自分が使っているThemeフォルダの中からFunction.php ファイルを開いてください。 Function.php に以下のようなFunctionを作っておきます。 後は、テンプレートファイルに以下のようにすれば、本文より、イメージなどを抜いた、指定した文字数だけが表示されます。 上の場合は250文字表示されます。Paragraphタグなど何も付いてないので、好きなように前後に付け足せば完了です。例えばこの様に いかがですか?何か意見や感想があれば聞かせてください。その他、読みたいチュートリアルのリクエスト等ありましたら、教えてください。

詳細を読む »