WordPress
授業で聞いた事の備忘録。
- 1. 固定ページ
- 2. 投稿ページ
- 3. トップページ
- 4. アンダースコア
- 5. とりあえず入れた方が良いプラグイン
- 6. 画像にテキストが表示される設定
- 7. カラムの設定（ページ作成時）
- 8. Googleマップを貼り付けるやり方
- 9. Twitter等をカラムに貼り付けるやり方
- 10. トップページの設定
- 11. カテゴリー
- 12. タグ
- 13. 画像のサイズ変更
- 14. 投稿ページのURLスラッグ変更
- 15. メニューの作成
- 16. Contact Form 7
- 17. データの引っ越し用プラグイン
- 18. ウィジェット
- 19. テーマ
- 20. 親テーマ
- 21. 子テーマ
- 22. Simplicity
- 23. テーマの保管場所（MAMPの場合）
- 24. 子テーマの最小構成
- 25. 小テーマを作る
- 26. MAMPなしでphpを動かす方法
- 27. ドキュメントルート
- 28. WordPressのプラグインの作り方
- 29. ショートコード
- 30. ob_start関数
- 31. WordPress関数を調べるサイト
- 32. テーマを作る時の参考サイト
固定ページ
一回作ったらほぼ固定。
・プライバシーポリシー等
投稿ページ
日々投稿するページ。
トップページ
固定ページと投稿ページをどちらかにするか選べる。
アンダースコア
何にも無い原型のテーマ。
・テーマの作り方は主に２種類有る。
A、Photoshop等でデザイン→HTML作成→WordPressに落し込む方法。
B、アンダースコアから作る方法。
とりあえず入れた方が良いプラグイン
WP Multibyte Patch（日本語化）。
画像にテキストが表示される設定
①メディアライブラリで代替えテキスト・キャプション等を設定。
②投稿ページの画像をクリック→置換→選択
カラムの設定（ページ作成時）
①ブロックを追加（+ボタン）
②デザイン→カラム
Googleマップを貼り付けるやり方
①Googleマップに住所を入力
②共有→地図を埋め込む→HTMLをコピー
（必要に応じてサイズを選ぶ）
③ブロックを追加
④カスタムHTMLを選択
⑤②を貼り付ける
Twitter等をカラムに貼り付けるやり方
①任意のTwitterページのアドレスを取得する
②挿入したいカラムにカスタムHTMLを追加する
③①を貼り付ける
Twitterのアドレス取得ページ
https://publish.twitter.com/
Facebookのアドレス取得ページ
https://developers.facebook.com/docs/plugins/page-plugin%3Flocale%3Dja_JP
（Facebookは公開設定のもののみ可）
youtubeは任意の動画の共有からコードを取得
トップページの設定
外観→カスタマイズ→ホームページ設定
・固定ページにする場合はチェック入れて追加。
→新規追加→固定ページ一覧でスラッグ内を英語に変更。
カテゴリー
大分類。メニューとして構成可。
タグ
小分類。
・投稿時のカテゴリーの下のタグ欄で設定可。
画像のサイズ変更
ブロックを指定して右側の設定画面最下部で変更。
投稿ページのURLスラッグ変更
左側の投稿のURLをクリック→パーマリンク変更。
メニューの作成
外観→メニュー→（名前つけて）メニューの作成。
Contact Form 7
お問い合わせフォームプラグイン。
・各種名称などの設定は、左側ダッシュボードの下の方の「お問い合わせ」から変更可。
データの引っ越し用プラグイン
①All-in-One WP Migration
1クリックでサイトを移動、転送、コピー、移行、バックアップ。
・サイトを引っ越す時にサーバー上のデータを手元にエクスポートする事が出来る。
・有効時、ダッシュボード下にプラグイン名が表示されるのでそこからエクスポート等可。
②Advanced WordPress Reset
リセットするプラグイン。
・ツール→プラグイン名が表示されるのでそこからリセット。
・プラグイン以外？削除される。
・リセット後はこのプラグイン以外が無効化になっている。
①でエクスポートし、②でリセットかけ、①でインポートして復旧出来る。
ウィジェット
外観→ウィジェット→～のサブカテゴリー表示ウィジェット
・タグクラウドで投稿時のタグ一覧が追加出来る。
テーマ
サイトの表示や機能をもつデザインテンプレート。
親テーマ
テーマ＝親テーマ（子テーマに対しての親テーマ）。
・親テーマもカスタマイズ出来るがバージョンアップで上書きされて消える。
子テーマ
親テーマに影響を与えずにカスタマイズ出来る方のテーマ。
・子テーマをいじってもテーマ全体に支障は出ない。
・インストールは、先に親テーマから。
Simplicity
内部SEO施策済みのシンプルな無料Wordpressテーマ。
テーマの保管場所（MAMPの場合）
C:\MAMP\htdocs\wp-content\themes
子テーマの最小構成
必要最低限のファイルは、下記ファイル。
・style.css（デザイン等を制御するファイル）
・functions.php（機能を登録するファイル）
小テーマを作る
・フォルダ名は小文字のみ。
// style.css (下記情報を伝えるだけのcss）
/*
Theme Name: テーマ名（例●● Child）
Author: 名前
Template: 親テーマフォルダ名
version: 1.0
*/
// 子テーマ用のスタイルシートを読込む
// cssフォルダを作ってその中のスタイルシートに設定を書き込む
@import url('./css/style.css');↑ここで入力した内容がWordPressのテーマの所に表示される。
// cssフォルダ内のスタイルシート
@charset "utf-8";
// 以下に通常のデザイン設定を書き込む↑実際のCSSはこっち入力。
// functions.php
<?php
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')
);
}
// アクションフック
add_action(
// wp_enqueue_scriptsの最後が複数形＝連想配列
'wp_enqueue_scripts',
'theme_enqueue_styles');・screenshot.png（任意の画像） を同フォルダに入れるとテーマ画面で表示される
・サイズはW:880px H:660px。
MAMPなしでphpを動かす方法
（htdogsじゃない所にある簡易なPHPを動かすぐらいなら…）
①デスクトップ下の検索
②システム環境変数の編集
③環境変数
④システム環境変数内のPath→編集
⑤新規→参照
⑥ＣドライブのMAMPのbinのphp（使用しているバージョンを選択）
（上記の環境変数の設定後の確認）
コマンドプロンプトで「php -v」と入力して、バージョンが表示されればOK
⑦VScodeにPHP Serverという拡張機能を追加。
⑧phpのコードを開いて右上の青のマークを押すとPHPが開く。
ドキュメントルート
サイトを公開する場所の最上部。
WordPressのプラグインの作り方
①簡単なwebアプリを作る（index.html,css,js,img）。
②①のデータ群が入ったフォルダを下記へ入れる。
C:\MAMP\htdocs\wp-content\plugins
③②のフォルダ内に「プラグイン名.php」を作る
④index.htmlの処理部分を③に移す（一部修正必要？）
⑤index.htmlを削除
// プラグイン名.php
<?php
/*
@wordpress-plugin
Plugin Name: プラグイン名
Description: 説明
Version: 1.0
Author: 作者名
*/
// 以下処理等ショートコード
[]で囲われた短いコード。
・あらかじめプログラムを組んでおく。
・よく使う定型文などを呼び出す便利な機能。
ob_start関数
PHPの関数の一つ。出力するタイミングをコントロールする為に使うらしい
// バッファで保留
ob_start();
（処理）
// 保留してたの出力
<?php
return ob_get_clean();WordPress関数を調べるサイト
WordPress Codex 日本語版
https://wpdocs.osdn.jp/Main_Page
テーマを作る時の参考サイト
テンプレート階層図