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

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

テーマの変更

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

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

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

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

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

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

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

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

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

パーマリンク設定

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

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

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

# /etc/apache2
# vi apache2.conf
  :
<Directory /usr/share>
		AllowOverride None				# None を All へ変更
		Require all granted
</Directory>

# 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				# 以下のように作成
<?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')
);
}
?>

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

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

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

海外サイト

フリー素材の探し方

ホーム
WebProgramming入門(備忘録)
ホーム
トップ