テーマの変更
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 # 設定を反映
プラグインのインストール
便利なプラグインはたくさんありますが、入れすぎるとサイトが重くなったり管理が煩雑になるので、必要なものに絞ってインストールします。最初にプラグインを一括ダウンロードできる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の既存テーマをカスタマイズする方法
フリー画像を提供しているサイト
海外サイト
- Beautiful Free Images | Unsplash
- Realistic Shots
- Gratisography: Free high-resolution photos
- IM Free - Free Images
- Foodiesfeed – Free Food Photos
- Free vectors, photos and PSD Downloads | Freepik
- Realistic Shots
- Freely Photos » FREE Christian stock photos
- Free Nature Stock · Royalty-free stock photos
- Free images for commercial use
- Free Stock Photos & Videos - SplitShire
- Trunklog.com | Free stock photos
フリー素材の探し方
WebProgramming入門
- 01a. 開発環境構築(Windows8.1+VMware Player+CentOS)
- 01b. 開発環境構築(Windows 10+Ubuntu)
- 01c. 開発環境構築(Ubuntu18.04(WSL)+Ansible+Serverspec+WP-CLI)
- 01d. 開発環境構築(WSL2+Ubuntu18.04+Docker)(作成中)
- 02a. AWS環境構築(CentOS6)
- 02b. AWS環境構築(CentOS6+LAMP環境+WordPress)
- 02c. AWS環境構築(CentOS7+Django)
- 02d. AWS環境構築(CentOS7+Ansible+Serverspec+WP-CLI+Munin)(作成中)
- 02z. さくらのクラウド環境構築(CentOS7+Ansible+Serverspec+WP-CLI)
- 03a. WordPress制作入門
- 03b. WordPress制作入門
- 04. トラブルシューティング
- 11. HTML/CSS入門
- 11a. ProgateでHTML&CSS初級
- 11b. ProgateでHTML&CSS中級(ランディングページ)
- 11c. ProgateでHTML&CSS上級(レスポンシブデザイン)
- 11d. ProgateでHTML&CSS(Flexbox編)
- 11e. ProgateでSass(CSSをより便利に効果的に操作する言語)
- 11y. ドットインストールでBootstrap4入門
- 11z. PaizaラーニングでBootstrap4入門
- 12. MySQL入門
- 12a. ProgateでSQL Ⅰ~Ⅲ
- 12b. ドットインストールでmongoDB入門
- 13. PHP入門
- 14. ProgateでRubyⅠ~Ⅴ
- 15a. ProgateでRuby on RailsⅠ~Ⅴ
- 15b. ProgateでRuby on RailsⅥ~Ⅷ
- 15c. ProgateでRuby on RailsⅨ~Ⅺ
- 16. ProgateでPythonⅠ~Ⅴ
- 17. paizaラーニングでFlask入門
- 18a. Django入門1(Djangoの基本の理解)
- 18b. Django入門2(Djangoの動作の理解)
- 18c. Django入門3(Djangoのテンプレートとフォームを理解)
- 18d. Django入門4(お勧め店を投稿できるランチマップアプリの作成)
- 18e. Django入門5(Djangoでユーザー管理)
- 19a. ProgateでjQuery初級編
- 19b. ProgateでjQuery中級編
- 19c. ProgateでjQuery上級編
- 20a. ProgateでJavascript(ES6)Ⅰ~Ⅲ
- 20b. ProgateでJavaScript Ⅳ~Ⅴ
- 20c. ProgateでJavaScript Ⅵ~Ⅶ
- 20d. JavaScriptでCRUDアプリを作る(ELOOP)