03b. WordPress制作入門(備忘録)

Contents

1 テーマの変更
2 パーマリンク設定
3 プラグインのインストール
4 多言語サイト作成
5 子テーマ作成
6 フリー画像を提供しているサイト
- 6.1 WebProgramming入門

テーマの変更

WordPressでは、好きなテーマをインストールして使用することができます。「テーマ」→「新規追加」をクリック

使用したいテーマが決まっている場合は、検索ボックスに入力します。

テーマが表示されたら、インストールをクリック。

ftp接続情報を入力して、ダウンロード＆インストール開始。

インストール後、有効化をクリック。

テーマがインストールされました。

続いて、ウィジェットを変更します。サイドバーをトップページ以外にも表示させたい場合は、トップページからサイドバー（共通）に移動します。不要なウィジェットは削除しておきます。他に表示させたいウィジェットを作成したい場合は、テキストボックスにコードを埋め込みます。

それから、スライドショーの設定をしていきます。画像を選択をクリックして、画像をアップロードします。

トップページにスライドショーが設定され、画像が切り替わるようになりました。

パーマリンク設定

URL構造を選択できるので、ここでは投稿名を選択して、変更を保存します。その際、.htaccessが更新されるので、事前にファイルオーナーとグループをwww-dataに変更しておきます。

# ll /usr/share/wordpress/.htaccess
lrwxrwxrwx 1 root root 23 Mar 24  2016 /usr/share/wordpress/.htaccess -&amp;gt; /etc/wordpress/htaccess
# cd /etc/wordpress
# chown www-data:www-data htaccess

また、apache2.confの編集も必要でした。

# /etc/apache2
# vi apache2.conf
  :
&amp;lt;Directory /usr/share&amp;gt;
		AllowOverride None				# None を All へ変更
		Require all granted
&amp;lt;/Directory&amp;gt;

# service apache2 restart				# 設定を反映

参考
パーマリンクの404 Not Foundエラーが発生

プラグインのインストール

便利なプラグインはたくさんありますが、入れすぎるとサイトが重くなったり管理が煩雑になるので、必要なものに絞ってインストールします。最初にプラグインを一括ダウンロードできるWPCoreをインストールすると楽です。よく使用する/必須と思われる12個のプラグインだけに絞ったものを「MHeiaIiDR3PJOmH71L7P」というコレクションに纏めましたので、よかったら使ってください。

便利なプラグイン一覧
No	プラグイン	内容
1	Akismet Anti-Spam	スパムコメントから保護してくれる。APIキーの取得が必要。デフォルトでインストールされている。
2	All in One SEO Pack	SEO(検索エンジン最適化)対策ツールで、検索エンジンに適切な情報を伝え、検索順位の向上を図る。
3	BackWPUp	WordPressのファイルとデータベースのバックアップを取得
4	Broken Link Checker	リンク切れを自動でチェック
5	Contact Form 7	お問い合わせフォームプラグイン(メールに関する機能は、下記Gmail SMTPで実装)
6	Flickr - Pick a Picture	著作権リンク付きの写真が挿入できる
7	Gmail SMTP	GmailのSMTPサーバー経由でメールを送信
8	Google Analytics Dashboard for WP (GADWP)	ダッシュボードでアナリティクスを確認
9	Google XML Sitemaps	サイトマップをGoogleに送信。インデックスへの登録漏れを防ぐ。
10	Head Cleaner	ソースを最適化して、サイト表示速度の向上に寄与
11	Imsanity	大きいサイズの画像を自動リサイズ
12	Lazy Load	画像を一枚ずつ表示してサイト高速化
13	WPCore	複数のプラグインを一括ダウンロード
14	P3 (Plugin Performance Profiler)	どのプラグインがサイトを遅くしているかを確認
15	Polylang	WordPress に多言語機能を追加する
16	Redirection	すべての 301 リダイレクトを管理し(サイト移転時に有効)404 エラーをモニター
17	SyntaxHighlighter Evolved	ソースコードを綺麗に表示
18	Table of Contents Plus	自動的に目次を生成
19	WordPress Popular Posts	人気記事表示
20	WordPress Related Posts	関連記事表示
21	WP Multibyte Patch	日本語版 WordPress のマルチバイト文字の取り扱いに関する不具合の累積的な修正を行う。デフォルトでインストールされている。
22	WP Social Bookmarking Light	ソーシャルボタンを設置
23	WP Super Cache	高速なキャッシュプラグイン

多言語サイト作成

下記を参考にpolylangプラグインをインストール＆設定し、各言語で記事を投稿すると、マルチリンガルサイトが作成できます。

Englishをクリックすると、

英語のサイトに切り替わります。

参考
多言語対応化WordPressプラグインならPolylangが秀逸！その特徴と使い方

子テーマ作成

既存テーマをカスタマイズしたい場合は、子テーマと呼ばれるテーマを別途作成します。

# cd /var/www/html/wp-content/themes
# ll
total 20
drwxr-xr-x. 9 apache apache 4096 Mar 13 14:53 bizvektor-global-edition
-rw-r--r--. 1 apache apache   28 Jun  5  2014 index.php
drwxr-xr-x. 6 apache apache 4096 Feb  6 17:49 twentyfifteen
drwxr-xr-x. 5 apache apache 4096 Feb  6 17:49 twentyseventeen
drwxr-xr-x. 7 apache apache 4096 Feb  6 17:49 twentysixteen
# mkdir bizvektor-global-edition-child					# 親テーマ名-childでディレクトリを作成
# chown apache:apache bizvektor-global-edition-child	# サブディレクトリのユーザとグループを変更
# cd ./bizvektor-global-edition-child

# vi style.css					# 以下のように作成
/*
Theme Name: BizVektor Global Edition Child
Template:   bizvektor-global-edition
*/

# vi function.php				# 以下のように作成
&amp;lt;?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')
);
}
?&amp;gt;

子テーマを有効化します。

参考
子テーマを作ってWordPressの既存テーマをカスタマイズする方法

フリー画像を提供しているサイト

海外サイト

フリー素材の探し方