WordPressを自分でカスタマイズしてきたときに得た知識をまとめています。使うことは少なくなりましたが、基本を知っていれば技術的なトラブルが発生した時に原因を見つける手掛かりになりますので参考にしてみてください。でも、Elementorを使うようになってからはこのような知識はほとんど使わなくても済むようになってしまったので、本当に余裕のある時に見てくださいね。

WordPressの構造

 まずは、WordPressの造りについて簡単に紹介します。WordPressは通常のホームページのようにhtmlファイルが1ページずつあるわけではありません。枠を用意しておいて、必要に応じてデータを組み込んで表示するというイメージです。

 通常のホームページが紙芝居なら、Wordpressはテレビのような感じです。

 さて、そのWordPress(テレビ)ですが、映し出す部分がいくつかの部品からなっていて、ヘッターと呼ばれるページの頭の部分、メインとかコンテンツとかいう記事の部分、右や左にあって、広告や更新情報を表示するサイドバーと言われる部分、そしてページ下部のフッターと呼ばれる部分などからできています。これらの枠をあらかじめ作っておいて、内容はDB(データベース)から呼び出して記事として出力する。そんなイメージです。

▶ スポンサードリンク


カスタマイズをする前に

必ずバックアップをとる

 いろいろカスタマイズを楽しむ前に、大切なことを2つ書きます。ひとつは、バックアップを取ることです。編集したいファイルをダウンロードして、別名で保存しておきましょう。いつでも戻せば元通りにできます。これをやらないと本当に困った事態になった時にどうすることもできなくなります。

ソースの編集に「メモ帳」は使わない

WordPressのphpをメモ帳で書き換えるとサイト上部に1行分くらいの空白ができたりサイトが左に寄ったりする。

 WordPress初心者の頃、phpファイルを管理画面のテーマの編集で行うと何も問題はおこらないのですが、メモ帳で編集してFTPでアップロードすると不具合が発生するという現象に遭遇しました。主な症状としては、サイトの上部に空白ができたり、Interne Explorerで見るとサイト全体が左に寄ったりするというものです。それが、たった1文字編集しただけでも発生する現象で、その1文字戻してももとに戻らないのです。header.phpを直接貼り付けて元に戻ったこともありましたが、最終的にはどうにもならなくなりました。その原因はなんと編集ソフトにメモ帳を使っていたことにありました。

原因:見えないBOM情報が付加される

wordpressで編集してOKで、メモ帳だとだめ・・・

これで検索してたどり着いた答えは…なんとメモ帳のダメ出し

windowsメモ帳で処理をしていると

ファイル保存時にutf-8のBOM(ByteOrderMark)有で保存している為自動で目に見えない情報が付加されてしまう。

こんなこと知りませんでした。だから対応策は

メモ帳を使わなければよい。

では、何を使うのか。私はこれ以降はTeraPadを使っています。一時さくらエディタを使ったこともありますがどちらでもいいと思います。実際にインストールして試してみたらうまくいきました。

phpファイルを書き換えてもレイアウト崩れや余計なスペースの発生は見られません。さらに、行番号がついていたり構文が色分けされていたりして見やすいのです。これでもうメモ帳はさようなら。

何を?どう?カスタマイズ

 さて、何をどうカスタマイズすればよいかという話ですが、表記や色、機能などやりたいことに合わせて何でもカスタマイズできます。

 カスタマイズするファイルは、今までのテーマの多くは、トップページはindex.php、記事のページはshingle.php、過去記事一覧はarchive.phpなど分かりやすい感じでした。最近のものは機能が充実した分少しわかりにくくなってしまい、探さなければいけませんが、基本的な考え方は同じです。

投稿ページのphpファイルの場合

青字で私が解読したことを書き込みます。

赤字の部分は、好きな言葉にしても良いところです。«は<< 
<div>
<h2><a href=”<?php the_permalink() ?>←投稿のアドレス” rel=”bookmark” title=”<?php the_title(); ?>”><?php the_title(); ?>←投稿のタイトル</a></h2>←<h2>はタイトルの部分です
<div>
<?php the_content(‘Read more &raquo;’); ?>←よくわかりませんが、消すとエラー
</div>

<p><strong>Posted:</strong> <?php the_time(‘F jS, Y’) ?>←投稿日時under <?php the_category(‘, ‘) ?>←投稿カテゴリ.<br />
<a href=”<?php comments_link(); ?>←コメントのURL“><strong>Comments:</strong> <?php comments_number(‘none‘,’1‘,’%’); ?>←コメントの数</a>
<?php edit_post_link(‘Edit this post‘,’ | ‘,”); ?>←コメントを編集するか Edit this postは「編集」などわかる言葉に書き換えてもいい</p>
</div>
<?php endwhile; ?>←消すとエラー
<div>
<p><span><?php next_posts_link(‘&laquo; Previous entries‘) ?>←前の記事</span>
<span><?php previous_posts_link(‘Next entries &raquo;’) ?>←次の記事</span></p>
</div>
<?php else : ?>←消すとエラー

例:descriptionをサイト内に表示させる

 かつて、All in One SEO Packを使って記事ごとにタイトルのつけ方や、記事の概要(description)を設定していました。例えば、その文をそのまま表示する形でAll Aboutの記事タイトルの下にあるように抜粋を表示できないかと考えてみました。使えそうなのは下のタグです。

タグ内では次のような構文で抜粋を表示しています。

<meta name=”description” content=”<?php bloginfo(‘description’); ?>” />

これをなんとか記事内で表示したいのですがそう単純にはいかないのです。そこで、次に試したのはこれです。

<?php the_excerpt(); ?>

これは、All in One SEO Packの文ではなく「抜粋」に入力したものを表示するものです。本文中で使えるのはこのタグでした。

 結局、SEO対策で入力した記事の概要を、抜粋にもコピペして入力して表示することにしました。先ほどのphpファイルを例に見ると、タイトルの下あたりに入れておけばそこに自分で作成した要約文が表示されることになります。

 なお、SEOテンプレート【賢威】 を使うようになってからはAll in One SEO Packは使っていませんし、直接要約文を貼り付けたら済むことでもあるので、最近はこのようなアレンジは行っていません。でも、WordPressならこのようなことも自由自在なのです。

▶ スポンサードリンク


cssファイルの場合

 phpファイルをカスタマイズすることは減りましたが、css(スタイルシート)は自分好みに加除修正したいところです。サイトの幅、字の大きさ、色、背景、リンクの効果などデザインに関する部分を変えたいときはcssを編集します。style.cssやbase.cssに保存されています。

 ブラウザがchromeの場合、右クリックで「検証」とするとソースやスタイルシートがまる分かりになります。しかも、ページ上で数値等を変えて試すこともできます。この辺りの機能については、別のページで詳しく紹介します。