WordPressのテーマを変更

2019/01/03

2015年にWordPressへ移行した際、従来のサイトに近い体裁にするためTwenty-Elevenを選び、試行錯誤、悪戦苦闘しながら編集したものの、結果的に子テーマの適用に失敗し、いままでTwenty-Elevenをベースにしたカスタムテーマを使用してきた。

それから3年、当サイトはPCソフトのインストールと使い方がメインなので、圧倒的にPCからのアクセスが多いものの、多分にもれず近年はスマホやタブレットの利用が増加。折しも年末にはGoogleのSearch Consoleで「モバイルユーザビリティの問題」が検出されてしまった。

一応、Twenty-Elevenはマルチスクリーンに対応しているのだが、ページの幅をpxで指定しているため、「コンテンツの幅が画面の幅を超えています」という結果になってしまうらしい。
そこで本サイトからエクスポートしたコンテンツを、別のテスト用サーバへインポートして、いくつかのテーマを試した結果、現在のデザインを踏襲しつつ、モバイル用のメニューも表示できるWordPress謹製の「Twenty-Sixteen」を利用することにした。



子テーマの作成

「WordPress Twenty-Sixteen」で検索すればカスタム方法を掲載したページが複数ヒットするので、今回もそれらのページを参考にしつつ調整。
WordPressはバージョン4.9あたりから安全性が強化され、管理画面の「外観」→「テーマの編集」からCSSを直接編集して更新をかけるとエラーを返すようになったので、今回は「カスタマイズ」の「追加CSS」で編集が行えるよう、WordPress公式が推奨している通り「子テーマ」を作成することにした。

Twenty-Elevenの時は子テーマの内容が何故か部分的にしか反映されなかったが、今回は拍子抜けするほどスムーズに子テーマを作成できた。

使用するのはFTPクライアントソフトとテキストエディタ。
今回使用したのはFTPクライアントソフト「FileZilla」とテキストエディタ「Brackets」。

FileZillaを使用してWordPressがインストールされているサーバにアクセスし、「wp-content」→「theme」を開き、インストールした「twenty-sixteen」のフォルダ名を確認。

デスクトップなど任意の場所に「twenty-sixteen」のフォルダ名に「-child」を追加した「twentysixteen-child」フォルダを作成。

/*
Theme Name: twentysixteen-child
Theme URI: http://example.com/twenty-sixteen-child/
Description: Twenty sixteen child Theme
Author: Owner
Author URI: http://example.com
Template: twentysixteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-sixteen-child
*/

Bracketsを起動して「新規作成」で上記のコードを丸ごと貼り付ける。
重要なのは赤字部分の「Theme Name」と「Template」。
「Theme Name」は先に作成したフォルダ名、「Template」はサーバの「theme」フォルダで確認した「twenty-sixteen」のフォルダ名。
大文字小文字も含めて一致しているか確認。

Bracketsにコードを貼り付けたら「名前を付けて保存」で「style.css」というファイル名で、作成した「twentysixteen-child」フォルダに保存。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>

再びBracketsで新規作成して上記のコードを丸ごと貼り付け、「functions.php」というファイル名で「twentysixteen-child」フォルダに保存。

FileZillaを使用して「twentysixteen-child」フォルダを「wp-content」内の「theme」フォルダにアップロード。

WordPressの管理画面で「外観」→「テーマ」にアップロードした「twentysixteen-child」が表示されているはずなので「有効化」する。

これで子テーマの作成が完了。

デザインの修正

Twenty Sixteenはブログに適したデザインで、投稿ページが独特なレイアウトになっている。

写真や動画などは左ペインの幅いっぱいに表示され、テキストは横幅の75%程度で右よりの配置になっており、左の余白には作成日や作者などのメタ情報が配置される。

固定ページはテキストが横幅いっぱいになり、PCのモニタで閲覧する際に横に伸びすぎる感が否めない。

その他の点としては、フォントが明朝体になっている、ウィジェットの仕切り線が気になる、ページ全体を囲っている黒枠が気になるといった感じ。

ページの黒枠修正

最も簡単なのがページの黒枠修正で、背景色を変更するだけ。

管理画面の「外観」→「カスタマイズ」で「色」を選択して、背景色を黒から任意のカラーに変更。
「枠」を外す場合は白を指定する。

CSSの修正

一般的にデザイン等の修正は、子テーマに作成した「style.css」に変更するコードを書き込んでいくのだが、WordPressには「追加CSS」という機能があり、変更箇所をすぐに確認できるだけでなく、その都度FTPクライアントでファイルをアップする必要もない。
子テーマを選択している状態であれば、親テーマのTwenty Sixteenを更新しても追加CSSが消えることもなく、直接CSSファイルを編集するわけではないため、更新したら管理画面にアクセスできないといったリスクもない。

背景色と同様、追加CSSも管理画面の「外観」→「カスタマイズ」から選択。
修正が必要な部分を追加していくだけ。

以下、今回の修正部分

/* 本文のフォント*/
body,
button,
input,
select,
textarea {
color: #1a1a1a;
font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,"MS Pゴシック",sans-serif;
}
/* 見出し*/

.entry-content h1,
.entry-summary h1,
.comment-content h1,
.textwidget h1 {
font-size: 18px;
font-size: 1.125em;
color: #FE2EF7; 
font-weight: normal;
line-height: 1em;
border-left: 10px solid #0B4C5F;
padding: 5px 10px;
margin-top: 1.250em;
margin-bottom: 3.125em;
}

.entry-content h2,
.entry-summary h2,
.comment-content h2,
.textwidget h2 {
font-size: 1.25em;
font-weight: bold;
color: #777878;
padding: 5px 5px;
margin-top: 0.313em;
margin-bottom: 0.313em;
margin-left:1.250em
}

.entry-content h3,
.entry-summary h3,
.comment-content h3,
.textwidget h3 {
color: #000;
font-size: 1.125em;
font-weight: bold;
background-color: #EFFBF5;
border-left: 10px solid #01DF3A;
padding: 5px 10px;
margin-top: 3.125em;
margin-bottom: 1.250em;
}

以下、省略
/*ウィジェットの体裁修正*/
.widget {
border-style: none;
font-size: 0.85em; 
line-height: 1.7em;
margin-bottom: 1em;
}
/*次の投稿 消去*/
.post-navigation {
display: none;
}
/*リンクの下線消去*/
a:link {
box-shadow: none;
}
a:visited {
box-shadow: none;
}
a:hover {
box-shadow: none;
}
/*固定ページの本文 幅変更*/

.site-main > article {
float: right;
width: 92%;
}
/* 投稿ページの本文 幅変更 */

body:not(.search-results) article:not(.type-page) .entry-content {
float: right;
width: 92%;
}
/* メニューの体裁変更 */

.main-navigation a {
background: #252A35; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#252A35, #16419E);
background: -o-linear-gradient(#252A35, #16419E);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252A35), to(#16419E)); /* older webkit syntax */
background: -webkit-linear-gradient(#f0f1f1, #f6f6f6);
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
clear: both;
display: block;
}
/* メニュー マウスオーバー時 */

.main-navigation li:hover > a,
.main-navigation li.focus > a {
background: #f9f9f9; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -o-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
color:#385e82;
font-weight: bold;
}

メタ情報の削除

投稿ページに表示される「作成日」「作者」などのメタ情報は不要なので移動ではなく削除した。
子テーマのフォルダ内に「template-parts」フォルダを作成し、親テーマの「twentysixteen」フォルダ以内の「template-parts」フォルダから「content-single.php」ファイルをダウンロードし、下記の赤枠部分を削除する。

<?php
/**
* The template part for displaying single posts
*
* @package WordPress
* @subpackage Twenty_Sixteen
* @since Twenty Sixteen 1.0
*/
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header><!-- .entry-header -->

<?php twentysixteen_excerpt(); ?>

<?php twentysixteen_post_thumbnail(); ?>

<div class="entry-content">
<?php
the_content();

wp_link_pages( array(
'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentysixteen' ) . '</span>',
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
'pagelink' => '<span class="screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>%',
'separator' => '<span class="screen-reader-text">, </span>',
) );

if ( '' !== get_the_author_meta( 'description' ) ) {
get_template_part( 'template-parts/biography' );
}
?>
</div><!-- .entry-content -->

<footer class="entry-footer">
<?php twentysixteen_entry_meta(); ?>
<?php
edit_post_link(
sprintf(
/* translators: %s: Name of current post */
__( 'Edit<span class="screen-reader-text"> "%s"</span>', 'twentysixteen' ),
get_the_title()
),
'<span class="edit-link">',
'</span>'
);
?>
</footer><!-- .entry-footer -->
</article><!-- #post-## -->

該当部分を削除してファイルを上書き保存し、子テーマのフォルダ内に作成した「template-parts」フォルダにアップロードする。

過去のデザイン

テーマを変更後、外付けハードディスクのデータを整理していたら、2012年当時のサイトのバックアップがでてきたのでデザイン更新の記念に。

今となってはノスタルジックなデザインだが、当時はKompoZerを使用して、分からないなりにHTMLと格闘していた。

WordPressに移行する前のデザイン。
初期の頃と比べると我ながら成長していると思う。

そしてWordPressに移行後、Twenty Elevenをカスタマイズした直近のデザイン。

今回のデザインで最後まで悩んだのがサイトのアイコンにもなっているテントウ虫の写真を使ったタイトル画像の設置だが、最終的にサイトのバランスを考慮して断念した。





Webコンテンツの制作

WordPressのテーマを変更

2019/01/03 2015年にWordPressへ移行した際、従来のサイトに近い体裁にするためTwenty-Elev … “WordPressのテーマを変更” の続きを読む

さくらインターネットからXServerへお引越し

2017/09/24 9月11日から「Service Temporarily Unavailable」が表示される503 … “さくらインターネットからXServerへお引越し” の続きを読む

Amazon Publisher Studioが機能しなくなった

2017/07/27 当サイトはWordPressを使用しており、自作パソコンやクロスバイクの改造など1部のページには、 … “Amazon Publisher Studioが機能しなくなった” の続きを読む

xdomainでWordPressを始めよう!

WordPressはオープンソースのブログプラットフォーム。 世界的に人気があるのだが、知っているのはWEB関連の情報に … “xdomainでWordPressを始めよう!” の続きを読む

WordPressをカスタマイズする前に

サイトのデザインをカスタマイズするため、ネットの情報を参考に見よう見まねでCSSやphpを編集してみたものの、手順や基本 … “WordPressをカスタマイズする前に” の続きを読む





さくらインターネットからXServerへお引越し

2017/09/24

9月11日から「Service Temporarily Unavailable」が表示される503エラーが頻発するようになった。

11日は「Kaspersky Freeのインストールと使い方」をアップしたくらいで、特にアクセスが集中しているわけでもなく、503エラーの理由がさっぱり分からない。

使用しているのは「さくらインターネット」のレンタルサーバで、プランはスタンダード。

コントロールパネルの「リソース情報」を確認すると、転送量もCPUの使用時間も大して伸びていないのに、11日から503エラーが異常発生している。

9月13日から「リソースブースト」という機能を有効にしたので、14日から発生回数は低減したものの、どうやら9月11日に「プログラムの過負荷により、CGI/PHPが制限されている」らしい。

当サイトは見ての通りコメントもトラックバックも許可していないので、大量のスパムでコメントが埋め尽くされることもない。

では、なぜ?。。。
サポートにメールで連絡したところ、原因はプログラムの起動上限数に達したことらしい。

ご利用サーバを確認したところ、プログラムの同時起動数が上限に達し
ているログが多数ございました。そのため、503エラーが発生している
状況でございます。

プログラムの同時起動数につきましても制限が設けられており、上限に
達した場合には503エラーを返し、一時的にサーバへのアクセスを制限
いたします。

ご利用のプログラムの設計を見直す、検索エンジンの クローラー等の過剰なアクセスがある場合は制限を行う、アクセス数の 多いコンテンツは静的コンテンツに切り替えるなどしてプログラム起動 数の削減を図ってくださいますようお願いいたします。

なお、ご利用サーバを確認したところ、サーバコントロールパネルの
「リソース情報」に制限についてのコメントが表示されておりました。

制限のコメントが表示されている場合、お客様にて設置されているコンテ
ンツ(プログラム)を見直していただき負荷が減りましても、制限は自動で
解除されません。

要約すると「原因は分からないがサーバに規定値以上の負荷がかかったので、取り敢えず勝手に制限をかけたから、原因を調べて対応したら連絡してこい」ということらしい。

この件で理不尽なのは、制限がかかったという通知が無いこと。
503エラーが出て、ページに「Service Temporarily Unavailable」と表示されると、個人的にものすごく不快な気分になる。
なによりせっかくアクセスしてくれたユーザーに対して失礼極まりない。

憤慨していても仕方ないので、取り敢えず「さくらインターネット」に見切りをつけ、無料サーバを使用していた「X Server」の有料プランを契約して引っ越すことにした。



XServerの設定

まず何よりもXServerの契約をしないと始まらない。
XServerには通常タイプのレンタルサーバと、WordPressに特化したwpXなるものが存在しており、WordPressを使用するならwpXのほうが、より高速っぽい感じだが、たまたま通常サーバで独自ドメイン無料キャンペーンが開催されていたので、思いっきり釣られてしまった。

Xserver

申込んだのはXServerのスタンダードプランで、10日間の試用期間付き。

「サーバ新規お申込み」をクリックすると契約ページ移行するので、必要事項を入力して申し込んだら、「【Xserver】■重要■サーバーアカウント設定完了のお知らせ[試用期間] 」というタイトルのメールが届くので確認。

メールには「インフォパネル」という管理画面に入るためのIDとパスワードのほか、サーバアカウントの情報も記載されている。

メールに記載されているリンクから「インフォパネル」に入り、続いてメールに記載されている情報を元に「サーバーパネル」へログイン。

「ドメイン」の「ドメイン設定」をクリック。

「ドメイン設定の追加」タブで使用するドメインを入力して「ドメイン設定の追加」をクリック。
当サイトの場合は「eizone.info」を追加。

ドメインが正しく追加されると、「ドメイン設定の一覧」に初期ドメインと追加した独自ドメインが表示される。

次に「さくらインターネット」にあるWordPressのデータベースをインポートするためのデータベースを作成するため「MySQL設定」をクリック。

「MySQL追加」タブで任意の半角英数の文字を入力し、「MySQLの追加(確認)」をクリック。

「MySQLデータベースの追加(確定)」をクリックしてデータベースを作成。

続いて「MySQLユーザーの追加」タブで、MySQLユーザーIDに任意の半角英数を入力し、パスワードを設定したら「MySQLユーザーの追加(確認)」をクリック。

作成したユーザーIDを確認して「MySQLユーザーの追加(確定)」をクリック。

「MySQL一覧」タブを開くと、先程追加したユーザーIDが「アクセス権未所有のユーザー」に表示されているので、「追加」をクリックしてアクセス権を付与する。

これで基本部分の設定は完了。

最後に「MySQL一覧」に表示されている「MySQLx.x情報」の内容を書き出すか、テキストなどにコピーしておく。

さくらインターネットからエクスポート

XServerの設定が終わったら、「さくらインターネット」のサーバにあるWordPressのデータとデータベースをエクスポートする。

データベースをエクスポートするため、「さくらインターネット」の「コントロールパネル」にログイン後、左ナビゲートメニューから「データベース設定」を選択し、データベースサーバの「管理ツール」になる「管理ツールログイン」をクリック。

「phpMyAdmin」にログインする。
ログイン時のユーザー名とパスワードは、データベース作成時に設定したもので、もし不明な場合はコントロールパネルから変更可能。

ログインしたら「エクスポート」タブを開き、左にある「エクスポート」からWordPressのデータベースを選択。

「データ」の箇所で「完全なINSERT文を作成する」「長いINSERT文を作成する」「BLOBに16進数表記を利用する」にチェックが入っていることを確認。

左の「エクスポート」で「SQL」にチェックが入っていることを確認したら、右下にある「実行する」ボタンをクリック。

※Free Downloaderなどを使用していると正常にファイルがダウンロードされないので、ブラウザの通常ダウンロードを使用。

保存先に「mysql◯◯◯.db.sakura.ne.jp」というファイルが生成される。

FileZillaやFFFTPなどを使用して「さくらインターネット」のサーバにアクセスし、「www」フォルダ内に作成した任意のWordPressフォルダを、任意の保存先へダウンロードする。

ダウンロードファイルの編集とインポート

ダウンロードしたMySQLのファイルと、WordPressの「wp-config.php」ファイルは編集が必要。

エクスポートしたSQLファイルは、OtbEditなどのテキストエディタで開き、上部の「– phpMyAdmin SQL Dump」~「データベース」の「USE ‘◯◯◯◯◯◯`;」の部分までを削除する。

削除しなかった場合、インポートでエラーが発生する。
実際には「データベース」の「CREATE DATABASE~」の構文が不要で、この部分のみを削除してもインポートは可能だが、余分な記述がされたままインポートされるので削除を推奨。

XServerにインポートするため、再度「インフォパネル」から「サーバパネル」を開き、「データベース」の「phpmyadmin(MySQL)」をクリック。

「インポート」タブで「アップロードファイル」にチェックを入れ、「ファイルを選択」をクリックして、編集したSQLファイルを指定後に「実行」。

インポートが完了するとデータベースがインポートされる。

FileZillaやFFFTPなどのFTPクライアントソフトを使用して「さくらインターネット」のサーバにアクセスし、「www」フォルダ内のWordPressのデータが格納されているフォルダをダウンロードする。

ダウンロードしたフォルダ内にある「wp-config.php」ファイルをテキストエディタで開き、「DB_NAME」「DB_USER」「DB_PASSWORD」「DB_HOST」の4項目を、XServerで設定したものに書き換えて上書き保存。

テキストエディタはOTB EditやTeraPad、サクラエディタなどを使用し、Windowsのノートパットやワードパット、Wordなどはエラーの原因になるため使用不可。

FTPクライアントソフトでXServerにアクセスし、ドメイン名フォルダ内にある「public_html」フォルダに、ダウンロードしたWordPressのデータが格納されているフォルダ内のオブジェクトを全てアップロードする。

これでデータの移行は完了。
あとはネームサーバの変更が必要になる。

データの確認

MySQLファイルもWordPressの各データもXServerに移動したものの、普通にサイトへアクセスしてもネームサーバが変更されていないので、さくらインターネットのデータが表示されてしまうため動作確認ができない。
そのため確認するにはXServerへ接続するよう、hostsファイルにIPアドレスを追記が必要になる。

「Cドライブ」→「Windows」→「System32」→「drivers」→「etc」フォルダ内にある「hosts」ファイルをテクストエディタで開く。

※Windows10だと直接開くと管理者権限の問題で保存できないので、一旦デスクトップにコピーしたものを編集してから上書きする。

hostsファイルの一番下に、「IPアドレス + (半角スペース) + ドメイン名」で入力する。

当サイトの場合、xxx.xxx.xxx.xxx eizone.info になる。

IPアドレスはXServerの「サーバパネル」の「サーバ情報」に表示されている。

これで後は普通にブラウザから自サイトへアクセスすると、XServerにアップした方が表示されるようになるので、一通りの動作確認が可能。

ドメインの移管

さくらインターネットへの不信感が芽生えてしまったので、ドメイン管理もXServerに移管することにした。

※サーバのみ「XServer」を使用し、ドメイン管理は「さくらインターネット」を継続使用することも可能で、その場合は「さくらインターネット」側でネームサーバの切り替えが必要になる。

移管手続は「さくらインターネットで転出申請」→「さくらインターネットから認証鍵(オースコード)が発行」→「XServerで移管申請」という流れ。

注意が必要なのは、同じXSERVERが展開しているXdomainは別物ということ。
Xdomainにもドメイン移管サービスはあるが、こちらのサービスを利用しても、XSERVERでの管理はできない。

同じだと勘違いしてXdomainでドメイン移管サービスを申請したことをXSERVERに連絡したら、Xdomainで申請をキャンセルするよう回答がきたので、Xdomainにキャンセル申請したら「移管申請中」のためキャンセルできず、「移管承認」をせずに自動キャンセルになった後、再度キャンセルの連絡が必要とのこと。
また、Xdomainで移管申請がキャンセルされるまで、XServerでは移管申請ができないので、とんだ回り道をしてしまった。

移管手続きは初めに転出申請から行う。
さくらインターネットの会員メニューの「契約情報」から「契約ドメインの確認」をクリックし、表示された一覧から該当ドメインの「転出」をクリックしたら、個人情報の取扱に同意。

普通の問い合わせフォームが表示されるので、「サービス名称」で「ドメインの取得」を選択。

「転出」するのに「取得」を選択するのがミソ。

「ドメインの取得」を選択すると、「お問い合わせの種類」にドメイン移管(転出)依頼の項目が選択可能なる。

後は必須項目だけ入力して送信するだけ。
数時間後には認証鍵(オースコード)がメールで送られてくる。
Xserverの移管手順に「レジストラロックの解除申請」とあるが、さくらインターネットではドメイン移管依頼をすることで同時にロックが解除される模様。

転出申請をしても、移管先でオースコードを入力しないと移管手続きは進まないので、サイトへのアクセスには問題ない。

ドメイン移管は「インフォパネル」にログイン後、「追加のお申し込み」をクリック。

利用規約と個人情報の取扱に「同意」する。

「移管」をクリック。

移管するドメインを入力して「検索」。

「申し込むことが可能です!!」と表示されたら「◯◯◯で申し込む」をクリック。

「お申し込み内容の確認」→「お申込内容の確定」と進み、料金の支払方法を選択したら移管の申込みは完了。

支払いが済んだら、「インフォパネル」のトップページにある「ドメインご契約一覧」に先程申請したドメインが表示されているので、「移管申請」をクリック。

さくらインターネットから受信したオースコードを入力して「移管申請を行う(確認)」→「移管申請を行う(確定)」。

申請が完了したら転出届時に入力したメールアドレスに、移管認証のリンクが貼ってあるメールが届く。
このメールが届いたのは申請してから4日後。

前述のように間違ってXdomainで登録したので、この申請をキャンセルして、再度XServerで申請したら、なんと1日で移管認証のメールが届いた。

タイミングの問題なのだろうが、移管認証のメール受信には当日~5日くらいの幅があるらしい。

メールに記載のあるリンク先で移管を承諾。

その後すぐに「レジストラトランスファーアウト意思確認のご案内」というタイトルのメールが「日本レジストリサービス」から届き、移管をキャンセルする場合はリンク先から手続きするよう記載があり、期限が2日後になっている。

すぐに処理を進めたい場合はメール内のURLにアクセスして「承認」すると、移管手続が開始される。

「承認」したら4時間後にはXServerから「ドメイン移管完了のお知らせ」が届いたが、これで終わりではない。

XServerの「インフォパネル」を開き、トップページの「ドメイン」から移管したドメインの「ドメインパネル」をクリックし、「ネームサーバの変更」タブを開いたら、ネームサーバにさくらインターネットのものが表示されているので、「エックスサーバのネームサーバを入力する」をクリックして「ネームサーバの変更」をクリック。

ネームサーバが変わったことを確認したらようやく完了。

ネームサーバの切り替えには最大24時間かかるらしいので、ここまできたら24時間待って、後はさくらインターネットを解約するだけ。

ページのレスポンスも早くなったので、結構いい感じかも。





WordPress

WordPressのテーマを変更

2019/01/03 2015年にWordPressへ移行した際、従来のサイトに近い体裁にするためTwenty-Elev … “WordPressのテーマを変更” の続きを読む

さくらインターネットからXServerへお引越し

2017/09/24 9月11日から「Service Temporarily Unavailable」が表示される503 … “さくらインターネットからXServerへお引越し” の続きを読む

Amazon Publisher Studioが機能しなくなった

2017/07/27 当サイトはWordPressを使用しており、自作パソコンやクロスバイクの改造など1部のページには、 … “Amazon Publisher Studioが機能しなくなった” の続きを読む

xdomainでWordPressを始めよう!

WordPressはオープンソースのブログプラットフォーム。 世界的に人気があるのだが、知っているのはWEB関連の情報に … “xdomainでWordPressを始めよう!” の続きを読む

WordPressをカスタマイズする前に

サイトのデザインをカスタマイズするため、ネットの情報を参考に見よう見まねでCSSやphpを編集してみたものの、手順や基本 … “WordPressをカスタマイズする前に” の続きを読む





Amazon Publisher Studioが機能しなくなった

2017/07/27

当サイトはWordPressを使用しており、自作パソコンやクロスバイクの改造など1部のページには、使用している工具やパーツなどの画像に、Amazon Publisherを利用して商品リンクを張っていた。

Publisher Studioを使用すると「今すぐ購入する」ボタンが画像に表示され、ボタンにマウスオーバーすると商品価格などの吹き出しが現れ、そのままクリックすればAmazonの該当ページが開く仕組み。

ページ制作後に画像をクリックし、タグ付けするだけなので非常に便利だったのだが、いつの間にかボタンが表示されるだけで、吹き出しがでないだけでなく、商品ページへのリンクも切れていた。

不思議と同じようにタグ付けした画像下の文字のリンクは生きている。

原因は全く不明で、普通に使用できていたものが突然使えなくなった感じ。
画像はWordPressのギャラリーを利用しているので、WordPressの更新絡みの可能性もあるが、Publisher Studioを編集モードにして画像を選択しても、タグ付けするためのポップアップメニューがでないので、タグを付けることも既存のタグを削除することもできない、全くのお手上げ状態。

最近はGoogleのアルゴリズムが変更になったせいか、アクセスも大幅に減っていて、まさに弱り目に祟り目。
RYZENで自作して喜んでいる場合じゃなかった。。。orz



ギャラリーの画像にカスタムリンクをつける

Publisher Studioを利用しているのは全部合わせても30枚程度の画像なので、地道にリンクを張り直すことにしたのだが、WordPressのギャラリーはカスタムリンクが使えない。

ギャラリーのリンクは「添付ファイルのページ」「メディアファイル」「なし」の三択。

デフォルトの仕様であればギャラリーを削除して、画像単体を再配置してカスタムリンクを付けることになるのだが、さすがに面倒臭い。

こんな時はとりあえずプラグイン探索。

で、発見したのが「WP Gallery Custom Links」という分かりやすい名前のプラグイン。

WordPressの現バージョン4.8では、「テストされていません」と表示されるが、普通に使えているので特に問題はないかと。

「WP Gallery Custom Links」をインストールすると、画像単体の編集ページとギャラリーの画像編集ページに上図のような項目が追加される。

このプラグインはギャラリーで設定した「添付ファイルのページ」「メディアファイル」を無効にし、入力されたURLへリンクを書き換えるような感じなので、使用する場合は「ギャラリーの設定」で「リンク先」を「添付ファイルのページ」、または「メディアファイル」にする必要があり、「なし」だと機能しない。

「Gallery Link Target」では「Do Not Change」「Same Window」「New Window」が選択でき、「リンク無効」「同じページでリンク先を開く」「新しいタブ(ウインドウ)でリンク先を開く」が指定できる。

「Do Not Change」は設定した画像をクリックすると、現在のページがリロードされるだけでリンク先は開かない。

「Gallery Link OnClick Effect」はリンクを設定した画像をクリックした際の動作で、リンク先を開くには「Remove」を指定。

「Keep」にするとリンク先へ「移動(remove)」するのではなく、現在のページを「保持(Keep)」することになる。

その他、「Gallary Link Additional CSS Classes」ではCSSを追加できるらしいが、使用していないので未検証。

なんとか「WP Gallery Custom Links」のお陰で再リンク作業は簡単に終わったものの、いまだに各画像にはPublisher Studioのタグが埋め込まれている状態で、応急処置的にフッターに追加したPublisher Studioのコードを削除して「非表示」状態にしてみた。





WordPress

WordPressのテーマを変更

2019/01/03 2015年にWordPressへ移行した際、従来のサイトに近い体裁にするためTwenty-Elev … “WordPressのテーマを変更” の続きを読む

さくらインターネットからXServerへお引越し

2017/09/24 9月11日から「Service Temporarily Unavailable」が表示される503 … “さくらインターネットからXServerへお引越し” の続きを読む

Amazon Publisher Studioが機能しなくなった

2017/07/27 当サイトはWordPressを使用しており、自作パソコンやクロスバイクの改造など1部のページには、 … “Amazon Publisher Studioが機能しなくなった” の続きを読む

xdomainでWordPressを始めよう!

WordPressはオープンソースのブログプラットフォーム。 世界的に人気があるのだが、知っているのはWEB関連の情報に … “xdomainでWordPressを始めよう!” の続きを読む

WordPressをカスタマイズする前に

サイトのデザインをカスタマイズするため、ネットの情報を参考に見よう見まねでCSSやphpを編集してみたものの、手順や基本 … “WordPressをカスタマイズする前に” の続きを読む





xdomainでWordPressを始めよう!

WordPressはオープンソースのブログプラットフォーム。
世界的に人気があるのだが、知っているのはWEB関連の情報に詳しい人で、一般的にはそれほど知られていないと思われる。
ブログを始める時に思い付くのは、アメブロ、JUGEM、FC2、Bloggerなどの無料ブログサービスで、いずれもビギナーにも優しい作りになっており、大抵はアカウントを作成するだけで使用できる。
その点、WordPressは一筋縄ではいかない。

WordPressそのものはオープンソースのプログラムなので、WordPressのシステム要件を満たしたサーバであれば、インストールすることで使用できる。
WordPress4.1.1日本語版の動作環境は、PHP バージョン 5.2.4 以上、MySQL バージョン 5.0 以上になっている。
が、この時点でビギナーには相当きつい。
条件がきついわけではなく、何が書いてあるのか分からないし、どうすれば良いのかも分からない。フリーソフトと同じで、便利で豊富な機能が無償で提供されていても、その機能を使いこなせるか否かはユーザー次第になる。

ただ、WordPressは奥が深いだけで、ちょっと頑張ればビギナーでも十分に利用できるし、一般的なブログサイトを使用するより、確実にWebコンテンツのスキルは向上するので、チャレンジする価値は十分にあると思う。



まずはサーバの用意から

WordPressを始める!と決意したら、次のアクションはサーバの確保。
有料・無料と世の中には多くのレンタルサーバが存在するが、WordPressがどういったものなのか勉強するなら、初めから有料のサーバを契約し、背水の陣で臨むのも一計だが、ここは無難に無料サーバがオススメ。

WordPressに対応している無料サーバもググれば結構あるが、人気なのはxdomain。
WordPress専用のレンタルサーバを運営しているXSERVERが展開しているサービスで、ドメインを取得しなくても無料でサーバを利用することができる。

 

無料の場合、サーバの容量は1GBで、広告の表示があり、その他にも有料のXserverと比較するといろいろと制限がある。
詳細はこちらのページを参照

制限があるとは言え、これだけの容量があれば十分。しかもWordPressの自動インストール機能付き。xdomain1

申し込みは左サイドバーにある上図赤枠部分から行う。
「初めてのご利用」→「メールアドレス入力」→「確認メール送信」→「受信したメールに記載のお申込URLをクリック」→「必要事項を入力」という流れで、最後に「ログイン」。

ここで設定したメールアドレスとパスワードは、xdomainの管理パネルへログインするためのものなので必ず控えておく。

xdomain2

管理パネルに移行するので、左サイドバーの「無料レンタルサーバー」をクリック。

xdomain3

任意のサーバーIDを登録したら、再び左サイドバーの「無料レンタルサーバー」をクリック。

xdomain4

WordPressの「利用を開始する」をクリックし、左サイドバーの「無料レンタルサーバー」をクリックすると、WordPressの箇所に「管理パネルログイン」と表示されるので、クリックしてログイン。

xdomain5

WordPressの管理画面に入っているが、まだWordPressはセットアップされていないので、「新規インストール」をクリック。

サイトアドレスの空欄はサブドメイン用なので新規インストール時は空白にし、後はWordPressIDとブログタイトル、メールアドレスを入力して「次へ進む」。

確認画面で内容を確認したら「確定(WordPressをインストール)をクリック。

xdomain6

これでWordPressのセットアップが完了。
表示されているURL・管理ユーザー・パスワードはWordPressの管理画面にログインするための情報なので必ず控えておく。
セットアップそのものは非常に簡単。データベースの設定がなく、入力箇所も必要最小限になっているので、ビギナーも安心。

xdomain34

WordPressのセットアップが完了したら、次にFTPアカウントの設定を行う。
xdomainの管理パネルから「無料レンタルサーバ」→「WordPress 管理パネルログイン」でWordPressの管理パネルを開き、上図赤枠部分の「設定」をクリック。

xdomain35

各種管理設定の「FTPアカウント設定」をクリック。

xdomain36

「全てのファイル・フォルダにアクセスする」にチェックを入れて「設定変更」をクリックし、「設定編集(確定)」を更にクリックすると、FTPアカウントの情報が表示され設定完了。
表示されたパスワードは後から確認することができないので必ずメモをとっておく。

次はコンテンツ作成の準備

サーバの設定とWordPressのインストールが終了したので、これで第一段階の準備完了。
他のブログサービスでいうなら、アカウントを取得した状態と同じ。これから白紙のブログをカスタマイズしていく。

xdomain7

取得したブログURLをクリックすると、上図のようなページが表示されるので、左サイドバーの「メタ情報」にある「ログイン」をクリック。
ちなみにこれがいま公開されている自分のブログ。

xdomain8

WordPressの管理画面へログインするため、取得した「管理ユーザー名」と「パスワード」を入力。

xdomain9

WordPressの管理画面に到着。ここまで来たら、もう一息。
「更新」の項目に数字が表示されている場合は更新を選択。

xdomain10

更新には「WordPress」「プラグイン」「テーマ」の3通りあるが、取り敢えず更新するのはWordPressだけでOK。
「WordPressの新しいバージョンがあります。」と表示されている箇所の「いますぐ更新」をクリックする。
更新は自動で行われ、完了すると「WordPress◯◯へようこそ」のような画面が表示されるので、左サイドバーの「外観」をクリック。

テーマを決める

WordPressには多くのテーマが用意されている。
WordPressオリジナルのものから個人、企業が作成したものまで、様々なデザインが提供されており、WordPressの管理画面から追加できるものは全て無料。
アフィリエイトに特化したテーマなど一般サイトで販売されているものもあり、「WordPress テーマ」で検索すればいろいろ出てくる。

xdomain11

「外観」をクリックすると、上図のようにすでにインストール済みのテーマが表示される。
現在のテーマは「有効」になっているもので、上図ではWordPressオリジナルのTwentyFifteen(2015) が選択されている。

Twenty Fourteen(2014)、TwentyThirteen(2013)もインストールされており、各テーマをクリックするとテーマの特徴が表示される。

ここで「気に入ったのがねぇ!」という場合は、「新しいテーマを追加」をクリック。

xdomain12

山ほどテーマが出てくるが、多すぎて選ぶのが大変なので、「特徴フィルター」をクリック。
希望の条件にチェックを入れて検索すれば、少しは対象が絞られる。
テーマのデザインは「ライブビュー」で実際のイメージを確認できる。
気に入ったテーマが見つかったら「インストール」をクリック。

xdomain13

インストールが終了したら上図の画面になるのでテーマを「有効化」すればOK。

各テーマのデザインは画像の差し替えなど、ある程度のカスタマイズは簡単に行えるが、余白やフォントの変更をはじめ、デザインそのものの設定を変更したい場合は、情報量が圧倒的に多いWordPressオリジナルのテーマを選択したほうが賢明。
ちなみに当サイトはTwenty Eleven を使用している。

カスタマイズする

テーマが決まったら次は基本デザインを設定。
左サイドバーの「外観」→「カスタマイズ」を選択。

xdomain14

WordPressオリジナルテーマで、CSSをいじらずに設定できるのは、このカスタマイズの項目のみで、表示される項目は各テーマによって異なってくる。
編集できる項目は限定されるが、各項目は何度でも自由に編集可能で、変更した後に「保存」をクリックすると、右側に表示されているページに反映されるので、確認しながら作業を行える。

余白が広すぎるとか、フォントが大きすぎるとか、ヘッダー画像の幅が気に入らないとか、検索窓が鬱陶しいとか、細かなデザインを変更したければ、CSSの編集が必要になってくる。

画像の追加と編集

サイトのイメージに大きな影響を与えるのがヘッダー画像。
画像が無しもシンプルで良いのだが、この部分を変更するとオリジナル感と達成感が得られるので、取り敢えず変更する。
「外観」→「カスタマイズ」から「ヘッダー画像」をクリック。

xdomain15

ヘッダー画像には推奨サイズは表示されおり、設定する画像を「リサイズ」か「トリミング」することになる。
百聞は一見にしかずなので、取り敢えず「新規画像を追加」をクリック。

xdomain16

メディアライブラリが開いたら、「ファイルを選択」をクリックしてヘッダーに表示したい任意の画像を選択するか、その画像をドラッグ・アンド・ドロップする。

xdomain17

画像をメディアライブラリの上にドラッグすると、上図のような表示に変わるので、そのままドロップすると、ファイルがアップロードされる。

xdomain18

ファイルの情報はメディアライブラリの右の「添付ファイルの詳細」に表示される。
この画像のサイズは3648*2736ピクセルで推奨サイズよりはるかに大きいため、「選択して切り抜く」という選択肢しか表示されていない。

xdomain19

「選択して切り抜く」をクリックすると、上図のような画像編集画面になる。
初期設定で表示されている選択部分が推奨サイズの比率になっており、サンプル画像と同じ縦横サイズになる。
選択範囲は自由に変更可能だが、横幅を基本にリサイズされるため、横幅は推奨サイズを下回らないようにしたほうが良い。
推奨サイズより小さな画像の場合、リサイズされて拡大されるので画像が荒くなってしまう。

xdomain20

推奨サイズより縦を長くして切り抜くと、切り抜いた画像がリサイズされてヘッダー画像に設定される。

xdomain21

ヘッダー画像だけではなく、アップした画像はリサイズ・トリミング・回転・ミラーと、簡単な編集が行える。
操作は上図赤枠部分のアイコンをクリックして行うが、トリミングは初めに切り抜きたい部分を画像上でドラッグすると、上図のように範囲選択できるので、トリミングする位置が決まった時点で、左端のトリミングアイコンをクリックして「保存」。
画像サイズを変更する場合は、「画像縮尺の変更」の箇所で任意の変更後の数値を入力して「縮尺変更」をクリック。リサイズは変更した時点で保存されるので、トリミングのように「保存」する必要はない。

固定フロントページ

固定フロントページは、トップに表示されるページもしくは投稿を指定する項目。
※固定ページと投稿ページについては後述。

xdomain22

デフォルトでは「最新の投稿」が設定されており、トップページにアクセスするとブログの最新記事が表示されるが、上図のように「固定ページ」のラジオボタンにチェックを入れ、任意のフロントページ(固定パージ)、もしくは投稿ページを指定することで、サイトのトップページを特定のページに固定することができる。

ウィジェット

ウィジェトは単独で動作するプログラムで、ブログで一般的なのは「カレンダー」「時計」「RSS」「最近のコメント」など。
これらは固定ページや投稿ページに表示されるわけではなく、サイドバーやフッダーに配置して使用する。

xdomain23

ウィジェトの追加・削除は「カスタマイズ」のメニューよりも、サイドバーの「外観」→「ウィジェト」で設定ページを開いたほうが分かりやすい。
使用するテーマによってサイドバーがあったりなかったりするが、フッダーは基本的にすべて存在する。

ウィジェトも後から変更可能なので、よく分からなければ適当でOK。

プラグインの有効化とインストール

WordPressには数多くのプラグイン(機能拡張)が公開されており、プログラミングの知識がなくても、プラグインをインストールして有効化するだけで様々なことが可能になる。

xdomain27

左サイドバーの「プラグイン」をクリックすると、デフォルトでインストールされているプラグインが表示されるので、「Akismet」と「WP Multibyte Patch」を有効化する。

xdomain28

Akismetは有効化するだけでなく、アカウントを有効化しなくてはならないので、「Akismetアカウントを有効化」→「APIキーを取得」→「GET AN AKISMET API KEY」をクリックすると、上図のページにくる。
Basicは無料で非商業用のサイトのみ利用可。問題なければ「SIGN UP」をクリック。

xdomain29

クレジットカードの登録画面が表示されるが、これは初期設定が36ドル/年の有料プランになっているため。
スマイルフェイスのスライドバーを左端に動かして無料プランに変更。

xdomain30

クレジットカードの入力画面が、氏名のみの入力フォームに切り替わるので、入力して「CONTINUE」をクリック。

xdomain31

表示されたAPIキーを「手動でAPIキーを入力」のテキストボックスに入力し、「このキーを使用」をクリックするとAkismetが有効になる。

この他のプラグインについては、自身のサイトに必要と思われるものを随時インストールしていけば良いのだが、取り敢えずコンテンツの作成を強化するプラグインを3つインストールする。

xdomain32

新しいプラグインは左サイドバーの「プラグイン」→「新規追加」で、上図赤枠部分に下記のタイトルを入力して検索。

TinyMCE Advanced
ビジュアルエディタを強化するプラグイン。
HTMLのタグを直接入力する玄人は別として、普通はWYSIWYG(ウィジウィグ)形式を利用すると思うので、インストールしておくと便利。

TinyMCE Clear
回り込みを解除する「clear:both」というタグを追加するボタンがビジュアルエディタに追加されるプラグイン。
すでの5年前のプラグインで最新バージョンのWordPressではテストされていないが、WordPress4.2 でも問題なく動作する。

Shortcodes Ultimate
ショートコードによってサイトの表現力を強化するプラグイン。
オリジナルのボタン作成などが可能になる。

コンテンツの作成

大まかな箱ができたら、次は中身の作成。

WordPressに限らず、多くのブログサービスに「記事」と「ページ」がある。
何が違うのかと言うと、一般的には「記事が動的」「ページが静的」と言われているが、動的とか静的とか言われても分からない。

WordPressのページは「固定ページ」と表記されているが、この固定ページにはカテゴリーなどの関連付けができず、独立したページになる。
一方の記事はWordPressで「投稿」と表記されており、こちらはカテゴリーやタグ付けなどが行え、普通のブログの記事と同じ。

「投稿」がブログなら、「固定ページ」はウエブサイトのようなもので、両者の性質は大きく異なっており、システムでの取り扱いも違ってくるのだが、見た目には全くわからないので、単純に「ブログっぽくしたいなら投稿」、「ウエブサイトっぽく作るなら固定ページ」で良いと思う。

SEOについて

検索での上位表示を意識するなら、Googleでガイドラインが公表されているので、まずガイドラインに沿って作成することが先決。

ウエブマスター向けガイドラインlink
検索エンジン最適化スターターガイドlink

・検索エンジンではなく、ユーザーの利便性を最優先に考慮してページを作成する。
・ユーザーをだますようなことをしない。
・検索エンジンでの掲載位置を上げるための不正行為をしない。ランクを競っているサイトや Google 社員に対して自分が行った対策を説明するときに、やましい点がないかどうかが判断の目安です。その他にも、ユーザーにとって役立つかどうか、検索エンジンがなくても同じことをするかどうか、などのポイントを確認してみてください。
・どうすれば自分のウェブサイトが独自性や、価値、魅力のあるサイトといえるようになるかを考えてみる。同分野の他のサイトとの差別化を図ります。

要約すると、妙な小細工をせず、質の高い、ユーザーが分かりやすいページを作れ、ってこと。

記事の新規作成

「投稿」または「固定ページ」を作成するには、左サイドバーの「投稿」または「固定ページ」をクリックするか、マウスオーバーで出現するサブメニューの「新規追加」を選択。

xdomain24

タイトルと本文を記入して、右サイドバーにある「公開」のメニューで「下書き保存」もしくは「公開」をクリック。
投稿をカテゴリー分類するには、右サイドバーの「カテゴリー」のメニューから「新規カテゴリーを追加」をクリックし、任意のカテゴリー名を入力後に「新規カテゴリーを追加」をクリック。
タグについても同様の操作で編集できる。

xdomain25

カテゴリーやタグは「投稿」メニューから事前に登録可能。
「スラッグ」は説明書きがある通り、URLに表示されるもので、デフォルトではタイトルがそのままスタッグに割り当てられる。
日本語のタイトルだと、そのまま日本語になってしまうため、Googleのガイドラインに沿って「コンテンツに関連した分かりやすい単語」を「半角英数」で登録する。

xdomain26

投稿や固定ページは初期設定でコメントやトラックバックが許可になっており、これらを許可しない場合は、上部にある「表示オプション」をクリックし、「ディスカッション」にチェックを入れると、コメントとトラックバックのチェックボックスが表示されるので、このチェックを外しておく。
ディスカッションの他にも、右サイドバーとフッターのウィジェトの表示・非表示は、この表示オプションで設定する。
また、表示しているウィジェットはドラッグすることで場所の移動が可能。

メニューを作成

サイトの構成や投稿のカテゴリーなどが決まったら、ユーザビリティを向上させるためにメニューを作成する。

xdomain33

「外観」→「メニュー」で設定画面を開く。
メニューには「ページ」のほか「カテゴリー」と「カスタムリンク」があり、任意で「メニューに追加」する。初めて設定する場合は、メニューの名前を入力して「メニューを作成」。
メニューはネスト(入れ子)に対応しているので、大分類→中分類→小分類と表示させることもできる。
メニューは複数作成することができるので、ヘッダー部分用とサイドバー用など、表示させる箇所によってメニューを切り替えることができる。

これで必要最小限+ の設定が完了。
後は左サイドバーの「設定」で「投稿設定」や「表示設定」などを編集すれば、結構な見栄えのするページになっていたりする。
CSSやPHPの知識がなく、取り敢えずWordPressを始めよう!というなら、このあたりから手を付けるのがベター。

ただ、文字の大きさや装飾、マージンなど細かな設定をしたい場合は、CSSやPHPを編集すれば可能で、オリジナリティも向上する。
最初はコードのコピペだけでもなんとかなり、編集しているうちにコードも見慣れてくるので、CSS初心者には最適な教材なのかもしれない。





世界的に人気のCMS WORDPRESS

WordPressのテーマを変更

2019/01/03 2015年にWordPressへ移行した際、従来のサイトに近い体裁にするためTwenty-Elev … “WordPressのテーマを変更” の続きを読む

さくらインターネットからXServerへお引越し

2017/09/24 9月11日から「Service Temporarily Unavailable」が表示される503 … “さくらインターネットからXServerへお引越し” の続きを読む

Amazon Publisher Studioが機能しなくなった

2017/07/27 当サイトはWordPressを使用しており、自作パソコンやクロスバイクの改造など1部のページには、 … “Amazon Publisher Studioが機能しなくなった” の続きを読む

xdomainでWordPressを始めよう!

WordPressはオープンソースのブログプラットフォーム。 世界的に人気があるのだが、知っているのはWEB関連の情報に … “xdomainでWordPressを始めよう!” の続きを読む

WordPressをカスタマイズする前に

サイトのデザインをカスタマイズするため、ネットの情報を参考に見よう見まねでCSSやphpを編集してみたものの、手順や基本 … “WordPressをカスタマイズする前に” の続きを読む





WordPressをカスタマイズする前に

サイトのデザインをカスタマイズするため、ネットの情報を参考に見よう見まねでCSSやphpを編集してみたものの、手順や基本を全く無視して作業を進め、かなり痛い目をみる羽目になった。



カスタマイズの下準備

スタイルシートはともかく、phpの編集は1つ間違えると再起不能に陥ってしまうので、まず心の準備とFTPクライアントを用意する。

WordPress6

上図は管理パネルからphpファイルを編集して保存した直後の状態。
phpファイルが不正に編集されると、管理パネルを含めた全てのページが上図のように真っ白になり、エラーが発生した行数が表示される。
エラーが表示された時は、FTP接続のことが念頭になく、画面同様、頭が真っ白になった。

この状態に陥ると、管理パネルからの修正は不可能なので、FTPクライアントソフトを使用して直接WordPressのフォルダにアクセスし、エラーが発生しているファイルを修正する必要がある。

WordPress2

xdomainの無料レンタルサーバーを使用している場合、FTP設定を有効化していれば、「xdomainの管理パネル」→「WordPressの管理パネル」とログインし、「インストール済みWordPress一覧」の「設定」→「FTPアカウント設定」で、上図のようにアカウント名やホストを確認ができる。

WordPress1

ホスト・ユーザー・パスワードを入力して接続。

WordPress3

xdomainの場合は直接WordPressのフォルダが開く。

WordPress4

さくらインターネットの場合は、wwwフォルダ直下に作成したWordPressのフォルダがある。
ちなみに当サイトは さくらインターネットのレンタルサーバを使用している。

接続したら「wp-content」→「theme」のフォルダを開いていく。

WordPress5

「theme」フォルダの中に現在インストールされているテーマのデータがあり、各フォルダ内にテーマのstyle.cssのほか、phpファイルが格納されている。

取り敢えず、style.cssや各phpファイルには、WordPressの管理パネルを使用しなくても、直接アクセス可能だと分かればOK。
いざというときは、この手順でWordPressのデータにアクセスする。

子テーマ

WordPressの公式フォーラムを始め、多くのサイトでCSSを編集する際には「子テーマ」を作成するよう推奨している。
その多くは子テーマを使用する理由に、「テーマが更新された際に変更部分が上書きされるため」となっている。テーマを更新するとスタイルシートも初期化されるらしい。

そもそも「子テーマ」とは、新たに作成するスタイルシートで、そこへ変更する箇所だけコードを記述する。
システムはスタイルシートからページのデザインを読み込むのだが、子テーマが存在していると、親テーマを読み込んだ後に子テーマを読み込むため、修正部分が上書きされる感じでデザインへ反映するという流れ。

ただ、CSS初心者としては新しくスタイルシートを作成するというだけで、小難しいようで抵抗があったので、「テーマを更新しなければ親テーマを直接編集してもOKのはず」と、勝手な解釈をして親テーマを直接編集していた。
ところが、順調だったもの束の間、コードをコピペしてから数値などを変更→保存→プレビューで確認→修正→確認→修正→確認。。。と、修正してもデザインが思うようにならないと、本来は変更しなくてもよいところまで修正したり、余分なコードを追加してみたり、いい加減な編集を繰り返すことになり、少しづつ微妙におかしくなっていく。

しかし、元に戻そうにも一度「保存」してしまうと「Ctrl + Z」は無効になり、親テーマを直接編集しているので原本は存在せず、修正しようとして更に傷口を広げることになった。
結局、収拾がつかなくなり、編集していたテーマを削除して、再インストールすることにした。

テーマの削除

使用しているテーマの削除は2通り。
管理パネルから「外観」→「テーマ」で、別のテーマを選択して「有効化」。

WordPress7

削除するテーマをクリックして詳細を画面を開くと、上図のように「削除」というボタンが出現する。

別の方法はFTPクライアントを使用してWordPressのフォルダにアクセスして、「wp-content」→「theme」を開く。

WordPress8

削除したいテーマのフォルダを削除する。

子テーマの作成

振り出しに戻ったので、同じ轍は踏むまいと子テーマを作ることにした。

WordPress Codex 子テーマの作り方link

style.cssに記述するコードが長々と記載されているが、実際に必要なのは下の2行だけのようで、重要なのは「Template」でしっかりと親テーマを指定しないと、システムが子テーマとして認識してくれない。

/*
Theme Name: Twenty Fifteen Child
Template: twentyfifteen
*/

WordPress91

テンプレート名を確認するには、FTPクライアントでサーバにアクセスし、「theme」フォルダ内にあるフォルダ名を見る。
また、子テーマのstyle.cssやfunction.phpファイルを白紙の状態から作成するのが微妙なら、親テーマのフォルダ内にあるstyle.cssとfunction.phpをデスクトップなどにダウンロードして、Otbeditやメモ帳で開いて編集して上書き保存すればOK。

WordPress10

themeフォルダ内に新規フォルダを作成し、推奨どおりフォルダ名を「テンプレート名-child」に変更して、フォルダにstyle.cssとfunction.phpをアップロード。

WordPress11

管理パネルに戻って「外観」→「テーマ」を開くと、作成した子テーマが認識されているはず。
「このテーマは壊れています」的な表示がある場合は、style.cssのコードが間違っている可能性が高いので再確認。

後は修正したいコードをそのまま子テーマのスタイルシートに記述すると、そのコードが反映されるはず、だった。
全く反映されていなければ設定ミスだと思うのだが、微妙に反映されていたり、されていなかったり。反映されていないコードの記述ミスかと思い、親テーマにコードをコピペすると、なんの問題もなく反映される。

いろいろと調べてみたが、結局は原因不明。
もっと時間を割いて原因を解明すれば、スタイルシートや子テーマの基礎知識が身に付くのだろうが、面倒なのでまたの機会に。

デフォルトテーマベースのカスタムテーマ

子テーマが使えないので、当初はバックアップで対応することを考えた。
原本としてインストールしたテーマをクリーンな状態でフォルダごとダウンロードして保存し、原本とは別に編集後のテーマもフォルダごとダウンロードしてバックアップすれば、オリジナルのテーマも参照できる。
ただ、誤ってテーマを更新した場合、テーマフォルダごと上書きして問題ないのかという懸念が残る。スタイルシートやphpファイルを変更した部分だけ再度編集するのが無難なのだが、この作業をもう一度するのかと思うとウンザリする。

そこで思いついたのが、テーマのフォルダ名を変更し、WordPressに違うテーマだと認識させる策。同じテーマを2つインストールすることはできないが、この方法ならTwenty Elevenの内容を持ったテーマを同時にインストールできる。

WordPress8

まずFTPクライアントソフトなどを使用してサーバへアクセスし、コピーしたいテーマをフォルダごとデスクトップ等へダウンロードする。

/*
Theme Name: Twenty Eleven
Theme URI: https://wordpress.org/themes/twentyeleven/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: 
----以下、省略-----
*/

ダウンロードしたフォルダ内のstyle.cssファイルを開き、冒頭部分(上図赤文字部分)の「Theme Name」を任意の名前に変更する。
ここのテーマ名は全角文字を使用しても認識してくれるが、半角英数の使用を推奨。
フォルダ名はスペース(空白)を含まない半角英数小文字を使用。

WordPress13

よりオリジナルっぽさを求めるなら、フォルダ内のscreenshotファイルを削除し、サイズが880×660 の画像を用意して「screenshot」という名称でフォルダに入れると、テーマ一覧でオリジナルの画像が表示される。
デフォルトの画像はPNGだがJPGでもOK。

WordPress14

編集が完了したらフォルダをZIPファイルに圧縮する。
圧縮は「フォルダ選択」→「右クリック」→「送る」→「ZIPフォルダー」。
WordPress管理パネルの「外観」→「テーマ」から、「新しいテーマの追加」をクリック。

WordPress15

続いて「テーマのアップロード」→「ファイルを選択」をクリックし、作成したZIPフォルダを指定して「いますぐインストール」をクリック。

WordPress16

インストールが完了したら「有効化」をクリック。

WordPress17

内容をコピーしたオリジナルテーマが完成。

WordPress18

デフォルトテーマとコピーテーマは共存しているので、「外観」→「テーマの編集」→「編集するテーマの選択」からいつでも切り替え可能。
管理パネルを同時に2つのタブで開くと、デフォルトテーマの値を見ながら、作成したテーマの編集ができるので意外と便利。

テキスト比較

編集の基本作業がコピペの場合、原本と編集後のコードを見比べることがしばしば起こる。
そのうちコードに慣れてくるのでマシにはなるが、初めは苦痛以外の何物でもない。

そこで役立つのが文章比較サイト difff(デュフフ)link
真偽の程は定かで無いが、かのSTAP細胞の論文解析にも使用されたとか、されないとか。。

WordPress12

使い方は比較する文章を右と左にそれぞれコピペして「比較する」をクリックするだけで、異なっている部分がハイライトされて表示される。
インターフェイスがシンプルなので非常に使いやすい。
同様のフリーソフトも存在するが、WordPressをブラウザ上で編集していると、すぐにアクセスできるdifffのようなサイトはすこぶる便利。

プラグイン

ページのレイアウトやデザインを作成していると、出来そうで出来ないことが意外と多く、それを可能にするためのコードを公開しているサイトもあるが、コピペでのみで対応するのは無理がある。
目的がスキルアップであれば労を惜しまず自前でコードを編集して作成するべきだが、デザイン完成を優先させるなら、便利で手軽なプラグインを使わない手はない。

新着情報の表示

What’s New Generator

国産のプラグインで新着の投稿・固定ページのタイトルを設定した数だけ表示。

WordPress19

プラグインをインストール、有効化したら、「設定」→「What’s New Generator」を選択し、タイトルや色などを任意で設定して「変更を保存」をクリック。

WordPress20

上図のように新着情報を表示させたい箇所に [showwhatsnew] というショートコードを記述するだけでOK。
ちなみにショートコードの記述はビジュアルエディタでも可。

パンくずリストの表示

Breadcrumb NavXTlink

パンくずリストは(E.i.Z |Software > Webコンテンツ > カスタマイズの準備)と、こんな感じでページ上部に表示してあるもので、ユーザーが今どの階層にいるのか一目瞭然で分かるリスト。

WordPress23

プラグインをインストール、有効化したら、上図のような表示になるので「すぐに移行する」をクリック。
設定画面が開くが取り敢えずデフォルトのまま、管理パネルの「プラグイン」→「Breadcrumb NavXT」→「詳細を表示」→「インストール」に順に移動。

<div class="breadcrumbs" xmlns:v="http://rdf.data-vocabulary.org/#">
 <?php if(function_exists('bcn_display'))
 {
 bcn_display();
 }?>
</div>

上記のコードをコピーしてパンくずリストを表示する任意の位置に記述する。

WordPress22

当サイトのようにメニューの下にパンくずリストを表示する場合は、「外観」→「テーマ編集」→「ヘッダー」を選択。

WordPress21

上図のように<!–#access–>と</header>の間に先ほどのコードを貼り付けるとメニューの下にパンくずリストが表示される。

.breadcrumbs{
 font-size: 10px;
 margin: 10px 50px;
}

表示されたパンくずリストはスタイルシートで装飾できるので、フォントサイズやマージン等を指定してできあがり。

TOPへ移動

jcwp scroll to toplink

このプラグインは今、右下に出現している「TOP MENU へ移動」というタブのようなボタンを表示するもので、クリックすると自動的にスクロールしてページトップへ移動する。

WordPress24

インストール後に有効化したら「設定」→「jcwp scroll to top」で設定が可能。
表示位置は右端・中央・左端の3箇所固定で、任意の位置に表示させることはできない。

「Animation Duration」はトップへ戻る速さで、「Show when scroll at」はボタンを表示させるタイミングを設定。「Easing type」は移動時のアニメーションがいろいろ用意されている。
その他はフォントやカラーの設定で、「Text to display」でボタンに表示するテキストを指定。

設定が完了したら「Save Changes」をクリックして終了。

固定ページや投稿に記事一覧を表示

List category postslink

全ての投稿記事のやカテゴリーを指定して、タイトルの一覧を表示するプラグイン。
このページの下にある「関連記事」の表示に、List category postsを使用している。

「プラグイン」→「List category posts」→「詳細表示」の説明に使用例が記載されているが、ショートコードで表示する記事を指定する。

カテゴリーIDでの抽出
[ catlist id = カテゴリーID]
カテゴリー名での抽出
[ catlist name = "カテゴリー名またはスラッグ"]
表示数を指定
[ catlist name = "カテゴリー名" numberposts=表示数]
タイトルで並び替え(昇順)
[ catlist id=カテゴリーID orderby=title order=asc]
日付順(降順)
[ catlist name="カテゴリー名" orderby=date order=desc]

当サイトの使用例
[catlist name=parts,remodeling numberposts=5 orderby=date order=desc]

上記のショートコードは、カテゴリースラッグが「parts」と「remodeling」に属する投稿で、表示数は5行、日付を降順で並び替え、という内容。

スラッグやタグ、カテゴリー名はダブルクオーテーションを使用する。
複数のスラッグやタグ、カテゴリー名を指定する場合はカンマ(,)で区切り、全体をダブルクオーテーションで囲む。
表示数の指定は単独で使用できず、カテゴリーIDやスラッグなどを指定する必要がある。
カテゴリーの指定や表示数、並び替えなどの各コード間は半角スペースを空ける。
並べ替えは昇順なら「asc」、降順なら「desc」。

ちなみに、カテゴリー名やスラッグが正しく認識されていないと、全ての投稿を対象として表示された。

WordPress25

カテゴリーIDは「管理パネル」→「投稿」→「カテゴリー」で任意のカテゴリーをクリックすると、ブラウザのアドレスバーに「ID= ◯◯」(上図赤線部分)と数値が入っており、これがカテゴリーIDになる。
スラッグは作成したカテゴリーに任意で作成するもので、自動生成されるものではない。

固定ページに投稿記事を表示

Posts in Pagelink

投稿のカテゴリーはページが存在していない。
カテゴリーのリンクを作成することはできても、リンク先で表示されるのは記事が連なったもので、そこへカテゴリーの解説文や画像の挿入はノーマルな使用方法ではできない。
カテゴリーのphpファイルを作成たらできるようだが、またもや難解なコードが羅列しているので、できれば避けたい。
そこで発想を転換して固定ページに投稿を表示できないか、と思って調べたら、都合の良いプラグインを発見。

Posts in Page はショートコードで、あたかも固定ページに書かれているかのごとく、投稿記事が表示できてしまう。
コードは前述のList category postsに似た感じで、カテゴリーIDやスラッグなどが指定でき、表示数や並び替えも同様にできる。

カテゴリーIDでの抽出
[ ic_add_posts ids='◯◯']
カテゴリースラッグでの抽出
[ ic_add_posts category='カテゴリースラッグ']
表示数を指定
[ ic_add_posts showposts='表示数']
タイトルで並び替え(昇順)
[ ic_add_posts orderby='title' order='asc']

List category postsは投稿記事のタイトルの表示が可能だが、Post in Pageは本文を抜粋した状態で表示するプラグイン。
List category postsはカテゴリーを指定する際に、ダブルクオーテーションを使用したが、Post in Pageはシングルクォーテーションを使用。その他の条件設定はほぼ同じだが、pose in Pageは「カテゴリー名」は使えず、IDかスラッグでの指定になる。

抜粋表を全文表示に編集

投稿を抜粋ではなく全文表示させたい場合やメタ情報を非表示にするためにはphpファイルを編集する必要があるため、編集するphpファイル「posts_loop_template.php」をメインテーマのフォルダにコピーする。

WordPress251

FTPで接続したら「theme」フォルダと同じ階層に「plugin」フォルダがあるので、「plugin」→「post-in-page」を開き、上図赤枠部分の「posts_loop_template.php」を一旦、デスクトップ等へダウンロードし、「theme」フォルダ内の現在使用しているテーマフォルダにアップする。作業が完了したら「外観」→「テーマの編集」に「「posts_loop_template.php」が追加されているので、編集作業は全てこのファイルを使用。

記事を抜粋表示から全文表示にするには「posts_loop_template.php」を開き、次のコードを変更する。

 <!-- This is the output of the EXCERPT -->
<div class="entry-summary">
 <?php the_excerpt(); ?>
 </div>

上記赤文字部分を <?php the_content(); ?> に変更。

<!-- This is the output of the EXCERPT -->
<div class="entry-summary">
 <?php the_content(); ?>
 </div>

これでpost in page で抽出した投稿は全て全文表示になる。
※任意のページのみ全文もしくは抜粋というのは無理らしい。

投稿の下にあるメタ情報を消す場合は、同じ「posts_loop_template.php 」の下記部分を削除する。

 <!-- This is the output of the META information -->
 <div class="entry-utility">
 <?php if ( count( get_the_category() ) ) : ?>
 <span class="cat-links">
 <?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ', ' ) ); ?>
 </span>
 <span class="meta-sep">|</span>
 <?php endif; ?>
 <?php
 $tags_list = get_the_tag_list( '', ', ' );
 if ( $tags_list ):
 ?>
 <span class="tag-links">
 <?php printf( __( '<span class="%1$s">Tagged</span> %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?>
 </span>
 <span class="meta-sep">|</span>
 <?php endif; ?>
 <span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?></span>
 <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta-sep">|</span> <span class="edit-link">', '</span>' ); ?>
 </div>

投稿を全文表示にしてメタ情報を削除すると次のようになる。

<!-- NOTE: If you need to make changes to this file, copy it to your current theme's main
 directory so your changes won't be overwritten when the plugin is upgraded. -->

<!-- Start of Post Wrap -->
<div class="post hentry ivycat-post">
 <!-- This is the output of the post TITLE -->
 <h6 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h6>

<!-- This is the output of the EXCERPT -->
<div class="entry-summary">
 <?php the_content(); ?>
 </div>

<!-- This is the output of the META information -->
 
</div>
<!-- // End of Post Wrap -->

上記の青文字部分はデフォルトで<h2>タグが使用されているのを変更している。

その他のウィジェット

All In One SEO Packlink
SEOの基本となるメタタグの入力などを可能にするウィジェット。

SEOに関してはGoogleのパンダアップデートやペンギンアップデートなどで、アルゴリズムが大幅に変更されると、過去に効果的と言われてきた対策がデメリットになったり、全くノーマークだった箇所が重要になったりするので、自然と情報が錯乱してしまうが、まずはGoogleが公表しているポイントを押さえるべき。
ウエブマスター向けガイドラインlink
検索エンジン最適化スターターガイドlink

Google XML Sitemapslink
検索エンジンのクローラー用に特化したサイトマップ。

サイトマップはサイトの構成を記したもので、最近は少なくなったがサイトマップとしてフローチャートを掲載しているサイトもある。
ただ、このGoogle XML Sitemapsはサイトに表示するためのものではなく、Google、Bing、Yahoo、Askと主要な検索エンジンのクローラー専用で、「ドメイン名.sitemap.xml」というURLは存在するものの、「sitemap.xml」という静的ファイルはディレクトリ上に存在せず、動的に生成されるのが特徴。
そのため固定ページや投稿を追加してサイトマップが変更されると、自動的にサイトマップも更新されるという優れもの。

Favicon Rotatorlink
ファビコンを表示させるためのプラグイン。

WordPress26

ファビコンとはブックマーク(お気に入り)に追加した際などに表示されるアイコン。

WordPress27

Favicon Rotatorは複数の画像を登録できるため、パソコンのブラウザ用だけでなく、スマホやタブレットでホーム画面に追加した時もアイコンが表示される。

「プラグイン」→「インストール済みプラグイン」→「favicon Rotator」→「設定」から、作成したアイコンを登録するだけ。

他にも様々なプラグインがあるので、コードの記述で行き詰まったり、コードを書くのが面倒だったり、使いたい機能がない場合などは、取り敢えずプラグインを調べるのがオススメ。
ほとんどのプラグインは英語表記だが、それほど難しいことは書かれておらず、ブラウザの拡張機能で翻訳するだけでも、ある程度の設定は可能。また、人気のプラグインは日本語訳して使い方を紹介しているサイトも多いので、分からなければGoogle先生に尋ねるのが手っ取り早い。





世界的に人気のCMS WORDPRESS

WordPressのテーマを変更

2019/01/03 2015年にWordPressへ移行した際、従来のサイトに近い体裁にするためTwenty-Elev … “WordPressのテーマを変更” の続きを読む

さくらインターネットからXServerへお引越し

2017/09/24 9月11日から「Service Temporarily Unavailable」が表示される503 … “さくらインターネットからXServerへお引越し” の続きを読む

Amazon Publisher Studioが機能しなくなった

2017/07/27 当サイトはWordPressを使用しており、自作パソコンやクロスバイクの改造など1部のページには、 … “Amazon Publisher Studioが機能しなくなった” の続きを読む

xdomainでWordPressを始めよう!

WordPressはオープンソースのブログプラットフォーム。 世界的に人気があるのだが、知っているのはWEB関連の情報に … “xdomainでWordPressを始めよう!” の続きを読む

WordPressをカスタマイズする前に

サイトのデザインをカスタマイズするため、ネットの情報を参考に見よう見まねでCSSやphpを編集してみたものの、手順や基本 … “WordPressをカスタマイズする前に” の続きを読む