index.phpのhead内の編集

index.phpに関わらず、アップロードした幾つかのPHPファイルの編集は、Wordpressの操作パネルの外観→テーマ編集で行います。

右の一覧の中から、「メインインデックスのテンプレート」というのを選びますと、index.phpを編集することができます。 以下のxml宣言の記述はPHP文書なので書くことはできません。 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

なので、まずはテンプレートの如く、以下をindex.phpに貼付けます。（ここからはXHTML1.0を例として解説しますが、HTML5でもやり方は同じです） 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
 
<head>
<title>タイトル</title>
<meta name="description" content="サイトの説明" />
<meta name="keywords" content="キーワード" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="cssファイルのURL" media="all" />
<script type="text/javascript" src="jsファイルのURL" charset="utf-8"></script>
<?php wp_head();?>
</head>
 
<body>
<?php wp_footer();?>
</body>
 
</html>

javascriptを使わないならばjavascriptのmetaタグやjsファイルの読み込みタグは消してください。

ここで、</head>の上に<?php wp_head();?>、</body>の前に<?php wp_footer();?>というPHPタグがあると思います。

footerの方は調べてないので今はよくわかりませんが、wp_headの方はプラグインが使用するcssやjsファイルを外部に読み込みに行くタグです。両方記述しておきましょう。当たり前ですが、これを記述しないならば、プラグインの使用するcssやjsファイルを読み込むためのlinkタグを自分で書かなくてはなりません。

で、これを記述すると同時に、画面上部に28pxのmargin（空白）が出現することがあります。どうやら操作パネル上部の管理バーのせいで起こるようで、ログイン者以外の人には表示されないので心配無いようです。
もし、それでも邪魔なようなら、function.phpに以下の記述を追加することで改善します。 

add_filter( 'show_admin_bar', '__return_false' );

それでは、それ以外のコードを分解してみて行きましょう。

titleの編集

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title><?php bloginfo('name'); ?></title>

DTD宣言は使う言語により異なります（上記はxhtmlを使用する場合の宣言です）。xhtmlとhtmlの大きく違うところは、<br>のような囲って使用しないタグでも、<br />のようにスラッシュで最後切らなければいけないというところでしょうか（切らなくても動きますが・・・）。

titleは、各ページごとに手打ちしてもいいんですが、Wordpressのよさにもなるんですけど、Wordpressのテンプレートタグを使うことで、ページごとに記述する必要がなくなります。

具体的に言いますと、 

<?php bloginfo('name'); ?>

というテンプレートタグは、ブログの名前を出力します。設定の一般で登録してある情報がそのまま打ち出されます。

なので、<?php bloginfo('name'); ?>を各ページの<title></title>の間にいれれば、自動的に一般で登録しているタイトルが表示され、設定の方でタイトルを自由にいじることができます。 index.htmlにはこれでよいですが、他のページにまでこのタグを打ってしまうと全てのページが同じタイトルになってしまうので。サブページで各ページごとに異なるタイトルを打ち出したい場合は、 

<?php the_title();?>

というテンプレートタグを使用します。このタグは新規投稿の際の、題目部分を表示します。トップページでは最新の投稿の題目部分が表示されてしまいます。（例：サブページには<title><?php bloginfo('name'); ?></title>と記述）

カテゴリページだけにカテゴリ名を表示する場合は、 

<?php single_cat_title();?>

というテンプレートタグを使用します。

カテゴリにいようと、各ページにいようと、その記事が属するカテゴリ名をリンク設定の状態で出力するタグに、 

<?php the_category();?>

があります。パンくずリストや、記事の右下への表示によく使われます。

さらに、カテゴリページに飛んだ時にはカテゴリ名を、各ページに飛んだ時はページのタイトル名を出力し、トップページでは非表示になる。つまり、トップページ以外のページに適したタイトルを出力する、 

<?php wp_title('-',true,'right');?>

というテンプレートタグがあります。実際に使わないとわかりづらいかもしれませんが、私的には使いやすいようで使いにくいタグの一つです。パラメータがあって、（）内を空白にすると右向きの矢印が現れます。

これらを使用しても目的のパンくずタイトルが作れないときには、各ページにだけ表示させるif文を使ったタグを使用するとよいでしょう。 

<?php if(is_category()):?>ここの文字はカテゴリページのみで表示されます。<?php endif;?>
<?php if(is_home()):?>ここの文字はトップページのみで表示されます。<?php endif;?>
<?php if(is_page()):?>ここの文字は固定ページのみで表示されます。<?php endif;?>
<?php if(is_single()):?>ここの文字は各ページのみで表示されます。<?php endif;?>
<?php if(is_archive()):?>ここの文字はアーカイブページのみで表示されます。<?php endif;?>
<?php if(is_month()):?>ここの文字は月別ページのみで表示されます。<?php endif;?>

これらを使ってtitleタグの中を埋めるわけですが、トップページだけに表示させないようにする命令をどう記述するかで躓きますが、これにはPHPの知識が必要です。そんなこんなでタイトルとしては以下のようなのがいいんじゃないでしょうか。 

<title>
<?php if(is_home()):?><?php bloginfo('name'); ?><?php endif;?><?php if(is_category()):?><?php wp_title('-',true,'right');?><?php endif;?><?php if(is_home() == false) { ?><?php the_title(); ?><?php } ?>
</title>

「トップページにいるときはサイトタイトルのみを、カテゴリページにいるときはカテゴリ名（もしくはページ名）を、トップページ以外にいるときはページ名を出力」

この場合のwp_titleはsingle_cat_titleでも代用可能です。

metaタグとlinkタグの編集

<meta name="description" content="サイトの説明" />
<meta name="keywords" content="キーワード" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="cssファイルのURL" media="all" />
<script type="text/javascript" src="jsファイルのURL" charset="utf-8"></script>

description内の文章は、上のサイト説明のところに入力した文が自動的に出力されるようにします。上のPHPタグをそのまま入れます。

キーワードは残念ながら手打ちでいれるか、titleタグを入れるかあたりになりますが、とりあえずtitleで解説したタグでも入れておけば良いのではないでしょうか。

text/htmlの部分のテンプレートタグもあるんですが、別にこれは手打ちで良いのではないでしょうか。

charsetは、 

<?php bloginfo('charset');?>

のタグにて、操作パネルの設定→表示設定のところで指定したエンコードの種類を出力できます。

最後にファイルのURL（つまりファイルの置いてあるディレクトリ）の指定方法なんですけど、これが最初は意外と躓くところ。

テンプレートとしては以下のようなタグがあり、 

<?php bloginfo('template_url');?>・・・テーマフォルダのURL
<?php bloginfo('stylesheet_url');?>・・・スタイルシートのURL
<?php bloginfo('template_url');?>/style.css

のようにして、スタイルシートを指定することもできます。

ただし、index.phpの場所はわかりますが、各ページのディレクトリがわからないので（今の時点で）、タグに頼らずに絶対パスで指定したほうがいいと思います。

pluginフォルダにはプラグインが入ります。uploadsフォルダには画像が入ります。

以上でindex.phpのhead内の編集をとりあえず終わりにします。

コメントor補足情報orご指摘あればをお願いします。

（件名or本文内でキーワード検索できます）



  • << 前のページ
  • 次のページ >>
ページトップへ