03b. WordPress制作入門

テーマの変更

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

タイトルとURLをコピーしました