WordPressリファレンス、メモ | VPSサーバーでWebサイト公開　備忘録　~Linux、MySQLからAJAXまで

WordPressの設定方法などリファレンスマニュアルを読んで確認した内容を備忘としてメモ書きしています。

※目次をクリックすると目次の下部にコンテンツが表示されます。

１．WordPress Terminology（用語）
２．投稿内にコードを記述、preタグ、codeタグ
３．ヘッダー画像のリンク設定
４．WordPress アドレスとサイトアドレス

WordPress Terminology（用語）

●media
　
・images, video, recordings, and files
・WordPressでは直接、投稿に挿入できたり、メディアマネージャで管理できたりする。
　
●カテゴリーとタグ
　
・カテゴリーは階層化。
・タグは通常階層化されない。
・カテゴリーとタグは、”taxonomies”という機能の一部。
・標準のカテゴリーとタグの機能で満たせない場合は、custom taxonomiesを定義する事が出来る。
・カテゴリーとタグは、投稿メタデータと呼ばれる要素の一部。
　
●post meta data
　
・ユーザーが割り当てるカスタムフィールドも含まれる。
　
●Meta
　
・WordPressでは、Metaは”～についての情報”を表す。
・Metaは、HTMLタグでも使用される。メタタグキーワード
・Meta sectionは、サイドバーで使われている。
・Meta Rulesで、一般的な規約を定義。
　
●Pages
　
・静的ページ。固定ページ。
　
●カスタム投稿タイプ
　
・投稿や固定ページとは異なるタイプの構造にできる。
・カスタム投稿タイプを使うと簡単にポートフォリオ、プロジェクト、ビデオライブラリ、ポッドキャスト、チャットなどを作成できるようになる。
　
●The Loop
　
・WordPressをカスタマイズしたり、拡張する場合は、The Loopを理解する事が必須。
　
●テンプレートタグ
　
・アクションを実行したり情報を表示したりする一連のPHP関数。
・テンプレートファイルの基本部分を形成。
　
●テンプレート階層
　
・処理する順番やテンプレートがどのようにヘッダー、サイドバー、アーカイブを表示するか決めるのに重要な役割。
　
●テーマ
　
・テンプレートとテンプレートタグは構成要素の一つ。
・テーマは、”skin”とも呼ばれる。
・Widgets、メニュー、背景、ヘッダーなど簡単に管理できる。
・Formatsを使用するとユーザーはある特定の投稿（引用、ギャラリーなど）の表示を管理できる。
・子テーマを使うと、WordPressアップデート中の上書きから守る事が出来る。
・プラグイン

投稿内にコードを記述、preタグ、codeタグ

●ビジュアルエディタとHTMLエディタ
　
・ビジュアルエディタは、コードを通常のテキストと解釈する。タグに使用する”<"や">“を<や>に変換する。
　
・HTMLエディタの場合は、変換せず、コードとして解釈する。
　
●投稿本文内にコードを記述する場合
　
・テキストを等幅フォントで表示するHTMLタグに、<code>タグと<tt>タグがある。
　
・タグをコードではなく文字として表示したい場合は、<を<に>を>として記述する。
　
●投稿本文内にURLを記述する場合
　
・WordPressでは、http:で始まるフレーズをリンクに変換する。
　
・リンクとしてみなしたくない場合は、http:の後のスラッシュを/として記述する。
　
●<pre>タグを使用
　
・<pre>タグを使用すると、等幅フォントで表示され、スペース、改行なども入力した通りに表示される。
　
●コードタグのスタイル
　
・<code>、<tt>、<pre> タグを使用すると等幅フォントで表示され、フォントのサイズは<body>タグのフォントサイズが適用される。
　
・上記３つのタグで使用する文字のフォントサイズを異なるサイズにしたい場合は、スタイルシート（style.css）で設定する必要がある。
　
（設定例）
pre {border: solid 1px blue;
　font-size: 1.3 em;
　color: blue;
　margin: 10px;
　padding:10px;
　background: #FFFFB3}
code {font-size:1.2em;
　color: #008099}

ヘッダー画像のリンク設定

ヘッダー全体をクリックできるようにするには、ヘッダー画像をリンクの内側に入れるように置かなければならない。
　
これをするには二つの方法があって、ヘッダー画像を直接テーマの設定に入れるか、又は、スタイルシートの設定でヘッダー領域にリンクサイズ領域を定義する必要がある。
　

（１）ヘッダー画像をクリックできるように修正

　
header.phpを下記のように変更

（変更前）
<div id="header">
  <h1><a href="<?php bloginfo('url'); ?>/">
    <?php bloginfo('name'); ?></a>
  </h1>
</div>
　
（変更後）
<div id="header">
  <a href="<?php bloginfo('url'); ?>">
    <img src="http://example.com/headerimage.jpg" alt="<?php bloginfo('name'); ?>" />
  </a>
  <h1><a href="<?php bloginfo('url'); ?>">" title="<?php bloginfo('name'); ?>">
    <?php bloginfo('name'); ?></a>
  </h1>

（２）ヘッダー画像を含めたヘッダー全体をクリックできるようにする

　
ヘッダー内のh1タグとリンクタグに対してスタイルシートに定義する。

（header.php）
<div id="header">
  <h1><a href="<?php bloginfo('url'); ?>/">
    <?php bloginfo('name'); ?></a>
  </h1>
</div>
　
（style.css）
#header h1 a {
  width: 400px;
  height: 100px;
  display: block;
  background: url(images/headerimage.gif) no-repeat top left;
}
#header h1 a span { display: none; }

（３）ヘッダー画像全体ではなく、ヘッダ内のテキストのみクリックさせたい場合

<div id="header">
  <div id="headerimg">
    <h1>
      <a href="<?php echo get_option('home'); ?>">
        <?php bloginfo('name'); ?>
      </a>
    </h1>
  <div class="description">
    <a href="<?php echo get_option('home'); ?>">
      <?php bloginfo('description'); ?>
    </a>
  </div>
</div>

（４）twentytwelveのheader.phpの記述内容

　
・サイトタイトルがリンク設定されている。
<h1 class=”site-title”><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></a></h1>
　
・サイトの説明はリンクされていない。
<h2 class=”site-description”><?php bloginfo( ‘description’ ); ?></h2>
　
・カスタムヘッダーで指定した画像ファイルに対してリンク設定されている。
<a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”><img src=”<?php echo esc_url( $header_image ); ?>” class=”header-image” width=”<?php echo get_custom_header()->width; ?>” height=”<?php echo get_custom_header()->height; ?>” alt=”” /></a>

WordPress アドレスとサイトアドレス

（１）WordPress アドレス (URL)　WP_SITEURL

　
・WordPressのインストールディレクトリのあるアドレスを定義
・wp_optionsテーブルのsiteurlの値
　
●wp-config.phpでの設定
　
define( ‘WP_SITEURL’, ‘http://example.com/wordpress’ );
　
●wp_optionsテーブル上の設定値を確認

mysql> select option_name,option_value from wp_options where option_name = 'siteurl';
+-------------+-------------------------------+
| option_name | option_value                  |
+-------------+-------------------------------+
| siteurl     | http://example.com/wordpress  |
+-------------+-------------------------------+

（２）サイトアドレス（URL）　WP_HOME

　
・WP_SITEURLと似ているが、こちらはサイトにユーザーがアクセスする際にブラウザーにタイプして欲しいURL。
・wp_optionsテーブルのhomeの値。
　
●wp-config.phpでの設定
　
define( ‘WP_HOME’, ‘http://example.com’ );
　
●wp_optionsテーブル上の設定値を確認

mysql> select option_name,option_value from wp_options where option_name = 'home';
+-------------+-------------------------------+
| option_name | option_value                  |
+-------------+-------------------------------+
| home        | http://example.com/wordpress  |
+-------------+-------------------------------+

　
・通常は上記二つは同じ設定になっているが、サブディレクトリタイプのサイトのホームURLをドメインのルートにする場合は、二つの設定値が違う値になる。
　
WordPressのディレクトリの場所はそのままにして、WordPressのURLをドメインのルートにしたい場合には下記参照。
　
WordPress を専用ディレクトリに配置する

関連記事の目次

WordPress設定

WordPress設定

セキュリティ

メンテナンス

その他、応用

（１）ヘッダー画像をクリックできるように修正

（２）ヘッダー画像を含めたヘッダー全体をクリックできるようにする

（３）ヘッダー画像全体ではなく、ヘッダ内のテキストのみクリックさせたい場合

（４）twentytwelveのheader.phpの記述内容

（１）WordPress アドレス (URL) WP_SITEURL

（２）サイトアドレス（URL） WP_HOME

コメントを残す コメントをキャンセル

（１）WordPress アドレス (URL)　WP_SITEURL

（２）サイトアドレス（URL）　WP_HOME

コメントを残すコメントをキャンセル