Category: デザイン

テーマとテーマのカスタマイズ

利用者は次の機能を使って書き込みができる。書き込みは、データベース(mysql)で管理されている。

  •  投稿記事(post)
    主にタイトル、コンテンツ、公開日時、カテゴリー(設定のない場合は未分類、複数設定可)、タグ(複数設定可)のフィールドから構成される。
  • ページページ(page)
    主にタイトル、コンテンツ、公開日時のフィールドから構成される。postとは別のテーブルで管理されている。固定的なページ(サイトの概要、自己紹介、地図など)を作成する際に使われる。

テーマは、テンプレート(phpファイル)とスタイル(cssファイル)から構成されている。
テーマは、ワードプレスの基本的なルールを守りつつ、オリジナルのデザイン・機能を提供している。

1、 htmlファイルを作るテンプレート・・・2の部品テンプレート(header.php、sidebar.php、footer.php)を内包している。

  •  メインインデックス(index.php)
    最新のポスト(post、複数の投稿記事)を表示するテンプレート。
  • ページ(page.php)
    ページ(page)を表示するテンプレート。
  • カテゴリー(category.php)
    カテゴリーに該当するポスト(複数の投稿記事)を表示するテンプレート。
  •  アーカイブ (archive.php)
    年月日に該当するポスト(複数の投稿記事)を表示するテンプレート。
  • タグ (tag.php)
    タグに該当するポスト(複数の投稿記事)を表示するテンプレート。
  • 単一投稿記事(single.php)
    一つのポストを表示するテンプレート。
  • 検索(search.php)
    検索語に該当するポスト(複数の投稿記事)・ページ(page)を表示するテンプレート。
  • カスタムテンプレート
    上記のテンプレートでは表現できない独自の内容を表示するときに使うテンプレート。テーマで提供される場合もある。ページ(page)で選択(デフォルトテンプレートに代わって)して使用する。

2、 htmlファイルの部品となるテンプレート・・・1のhtmlファイルを構成している。

  •  ヘッダー (header.php)
    htmlファイルのタグの部分と、のうち、上部のタイトルバナーの部分を記述している。
  • サイドバー (sidebar.php)
    のうち、サイドのナビゲーションメニューの部分を記述している。
  • フッター (footer.php)
    のうち、下部のフッターの部分(コピーライトや会社名など)を記述している。
  •  コメント (comments.php)
    postおよびpageに対するコメントの書き込み・表示を記述している。
  • 404 テンプレート (404.php)
    htmlファイルが表示されないエラーのときに表示するテンプレート

3、 スタイル

  • スタイルシート (style.css)
    CSSのデザインを記述するファイル

4、 htmlファイルの構成

 

<head>

タイトル、キーワード、文字セットなど

(header.phpの上部で記述)

<body>

表示部分

ヘッダー (header.phpの下部で記述)

サイドバー(sidebar.phpで記述)

コンテンツ

index.phpsingle.php search.php page.php category.php archive.phptag.php」で記述されている「header.phpsidebar.phpfooter.php」以外の部分

フッダー (footer.phpで記述)

プラグイン Smart Archives Reloaded をインストール

カテゴリを選択して月別にタイトル一覧を表示するプラグイン「Smart Archives Reloaded」をインストールしました。これは、プラグイン「Smart Archives」を拡張したバージョンで取り扱いが簡単になったそうです。

プラグイン> プラグインブラウザ/インストーラ で検索、「Smart Archives Reloaded」をクリックしてダウンロード、有効化します。
設定>Smart Archives で、Use anchor links in blockをチェック、Exclude Categories by IDを「0」にして、「save changes」をクリックします。

ページ>新規追加で タイトル「記事タイトル一覧」とし、内容のところに[smart_archives](*)と記述して公開をクリック。 *前行の[](全角)は、実際には[](半角)であるが、半角にすると記事タイトル一覧データそのものが表示されるため全角にしています。

Exclude Categories by ID には、カテゴリのID番号を入れると該当するカテゴリの記事が除外されると思ったのですが、「0」ではすべての記事が表示され、「0」以外の番号では何も表示されません。私の知識不足が原因なのかどうか、とにかく「0」として記事を表示させました。

サイドバーのパーツの順番を入れ替える

サイドバーの表示の順番を入れ替えます。

外観>編集で「sidebar.php」を開いて、上の方に表示したい[calendar,category]を <li></li>で囲まれた部分ごとカット&ペーストしました。これはそんなに難しくありません。

テーマ「magicblue」のサイドバーがちょっと変

サイドバーを見ると、検索が2つもあります。

外観>ウィジェットを見ると、現在使用されているウィジェットはありませんでした。試しに、外観>ウィジェットで「検索」を追加すると、サイドバーには、RSSと検索が2つ表示され、その他のパーツは消えてしまいました。

元の設定に戻して、外観>編集で「sidebar.php」の内容を確認しました。とはいっても、wordpress、phpのプログラムに詳しいわけではないのですが。
内容を見た結果、このテーマ「magicblue」のサイドバーは、外観>ウィジェット機能は使用しないで直接関数で書いていることがわかりました。
ここでは、外観>ウィジェット機能を使用しないことにして、2つのうち下の方の「検索」を削除(コメント化)して、「sidebar.php」を更新しました。

以下赤・青が私の書き込みです。

[sidebar.phpの内容]

<!– begin sidebar –>
<div id=”sidebar”>

<!– ここからRSS購読を表示 –>

 <div id=”subscribe”>

  <h3 style=”font-size: 150%;font-weight:100;”><img alt=”RSS” src=”<?php bloginfo(’template_directory’); ?>/images/feed-icon-16×16.gif” /> Subscribe</h3>

  <p><a href=”<?php bloginfo_rss(’rss2_url’) ?>”>Entries RSS</a> | <a href=”<?php bloginfo_rss(’comments_rss2_url’) ?>”>Comments RSS</a></p>

 </div>

<!– ここまでRSS購読を表示 –>

<div class=”menu”>

 <ul>
  
<!– ここから検索を表示 –>

  <li class=”widget” id=”search”>
   <h3><?php _e(’Search’); ?></h3>

   <form id=”searchform2″ method=”get” action=”<?php bloginfo(’home’); ?>”>
  
  <input type=”text”  onfocus=”doClear(this)” value=”<?php _e(’To search, type and hit Go’); ?>” name=”s” id=”s” style=”width:130px” /> <input type=”submit” value=”<?php _e(’Go’); ?>” />
   
   </form>
 
  </li>

<!– ここまで検索を表示 –>

<!– ここで「外観>ウィジェット機能」を使用する場合と使用しない場合を分岐 –>

<?php /* WordPress Widget Support */ if (function_exists(’dynamic_sidebar’) and dynamic_sidebar(1)) { } else { ?>

<!– ここからは、「外観>ウィジェット機能」を使用しない場合のみ表示される –>

<!– ここからページを表示 –>

 <li class=”widget” id=”pages”>
 <h3><?php _e(’Pages’); ?></h3>
  <ul>
    <?php wp_list_pages(’title_li=’); ?>
  </ul>
 </li>
 
<!– ここまでページを表示 –>

<!– ここからリンクを表示 –>
 
<li class=”widget” id=”links”>
  
  <?php wp_list_bookmarks(’title_before=<h3>&title_after=</h3>&category_before=&category_after=’); ?>
  
 </li>
 
 
 <li class=”widget” id=”categories”><h3><?php _e(’Categories’); ?></h3>
 <ul>
 <?php wp_list_categories(’title_li=’); ?>
 </ul>
 </li>

<!– ここまでリンクを表示 –>
 
<!– ここから検索を表示 –>

 <li class=”widget” id=”search”>
   <h3><?php _e(’Search’); ?></h3>
   <ul>

    <form id=”searchform” method=”get” action=”<?php echo $_SERVER['PHP_SELF']; ?>”>
 
  <input type=”text” name=”s” id=”s” style=”width:100px” /><input type=”submit” value=”<?php _e(’Search’); ?>” />

 </form>
   </ul>
 </li>

<!– ここまで検索を表示 –>

<!– ここからタグクラウドを表示 –>
 
 <li class=”widget” id=”tags”><h3><?php _e(’Tagcloud’); ?></h3>
 
 <?php wp_tag_cloud(’smallest=8&largest=16′); ?>

 </li>
 
  <li class=”widget” id=”archives”><h3><?php _e(’Archives’); ?></h3>
  <ul>
  <?php wp_get_archives(’type=monthly’); ?>
  </ul>
 </li>

<!– ここまでタグクラウドを表示 –>

<!– ここからメタ情報を表示 –>

 <li class=”widget” id=”meta”><h3><?php _e(’Meta’); ?></h3>
  <ul>
  <?php wp_register(); ?>
  <li><?php wp_loginout(); ?></li>
  
  <li><a href=”<?php bloginfo(’rss2_url’); ?>” title=”<?php _e(’Syndicate this site using RSS’); ?>”><?php _e(’RSS’); ?></a></li>

  <li><a href=”<?php bloginfo(’comments_rss2_url’); ?>” title=”<?php _e(’The latest comments to all posts in RSS’); ?>”><?php _e(’Comments RSS’); ?></a></li>
  <li><a href=”http://validator.w3.org/check/referer” title=”<?php _e(’This page validates as XHTML 1.0 Transitional’); ?>”><?php _e(’Valid <abbr title=”eXtensible HyperText Markup Language”>XHTML</abbr>’); ?></a></li>
  <li><a href=”http://gmpg.org/xfn/”><abbr title=”XHTML Friends Network”>XFN</abbr></a></li>
  <li><a href=”http://wordpress.org/” title=”<?php _e(’Powered by WordPress, state-of-the-art semantic personal publishing platform.’); ?>”><abbr title=”WordPress”>WP</abbr></a></li>

  <?php wp_meta(); ?>
 </ul>
 </li>
 
<!– ここまでメタ情報を表示 –>

<!– ここからカレンダーを表示 –>

 <li class=”widget” id=”calendar”>
 <h3><?php _e(’Calendar’); ?></h3>
  <?php get_calendar(); ?>
 </li>
 
<!– ここまでカレンダーを表示 –>
 
<!– ここまでは、「外観>ウィジェット機能」を使用しない場合のみ表示される –>

<?php } ?>

<!– ここで分岐が終了 –>

</ul>
</div>

</div><!– end sidebar –>

テーマ(デザイン)を変える

デフォルトのブログのデザイン(テーマという)は面白くないので変更します。

ダッシュボード>外観>テーマ で、「現在のテーマ」にデフォルトテーマが表示されています。その下に「利用可能なページ」が表示されていますが、少ないのでページの下にあるWordPress テーマディレクトリでテーマを探します。

私は「magicblue」を選び、ダウンロードしました。ダウンロードしたテーマファイルは、フォルダごと wp-content>themes にアップロードします。

ダッシュボード>外観>テーマ を更新すると「利用可能なページ」に「magicblue」が表示されますのでクリック、使用するをクリックします。ページトップの「←サイトを開く」をクリックしてデザインの変更を確認します。

WordPress Themes