きょうは「wordPress で html の編集」について学びます。
WordPress で「htmlファイル」を見たことありますか?
普通は「index.html」とかがトップページにあるものですが、WordPress に html ファイルはないのです。「URLリライト」という技術が使われています。
不思議ですね。どうしてでしょうか。わたしはこのことがずーっとわかりませんでした。ウヤムヤ感にさいなまれていたのです。
きょうは、その「編集するにはどうすれば」について学習します。
1.WordPress の基本設定
![wordpress](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/webp.webp?resize=920%2C482&ssl=1)
![taka](https://i0.wp.com/pckatada.com/wp-content/themes/cocoon-master/images/man.png?w=1220&ssl=1)
WordPress を作るには3つ必要です。よく例えられるのが
- サーバー————–土地
- ドメイン————–住所(あとで変更できない)
- WordPress————家
WordPress のシステムとデータベースはサーバーに置かれています。それらの情報を WordPress が読みこんで、それをパソコンやスマホのブラウザに表示するという仕組みです。
1.WordPressは簡単にカスタマイズできる
テーマやプラグインを使えば、自分の好みに合わせてブログやウェブサイトを作ることができるんや。管理画面も使いやすいし、ちょっとした知識があれば誰でもすぐにカスタマイズできるんちゃうかな。
サイトのタイトルとタグラインの設定
- WordPressのダッシュボードにログインし、左側のメニューから「設定」→「一般」を選択します。
- 「サイトのタイトル」と「タグライン」を入力します。これはサイトの名前とキャッチフレーズを指します。
WordPressのアドレスとサイトのアドレスの設定
- 通常、WordPressをインストールすると、WordPressのアドレスとサイトのアドレスが同じになりますが、異なる場合は設定で変更できます。
- 「設定」→「一般」で、「WordPressのアドレス (URL)」と「サイトのアドレス (URL)」を入力します。
タイムゾーンの設定
- 「設定」→「一般」のページにスクロールダウンし、「タイムゾーン」を選択します。タイムゾーンを正確に設定することで、日付と時刻が正しく表示されます。
言語の設定
- WordPressは多言語に対応しています。WordPressのダッシュボードにログインし、左側のメニューから「設定」→「一般」を選択します。
- 「サイトの言語」を選択して、使用する言語を選ぶことができます。
パーマリンクの設定
- パーマリンクは、ページや投稿のURLの構造を指します。意味のあるURLを設定することで、検索エンジンの最適化が向上します。
- 「設定」→「パーマリンク設定」で、デフォルト設定以外のオプションを選択することができます。
コメントとトラックバックの設定
- コメントとトラックバック(他のサイトからのリンク)の設定を管理できます。
- 「設定」→「ディスカッション」で、コメントやトラックバックに関連する設定を調整できます。
トラックバック(Trackback)は、ウェブサイト間での相互リンクを通知するための仕組みです。ウェブログ(ブログ)などのウェブページにおいて、他のブログ記事への反応や引用を追跡するために使用されます。
トラックバックを設定することで、以下のような利点があります:
相互リンクの通知
あるブログ記事が別のブログ記事を引用したり、反応したりした場合、トラックバックを使ってそれを相手のブログに通知できます。これにより、読者は元の記事と引用記事との関連性を理解できますし、記事の著者にも相互リンクがあったことを知らせることができます。
トラフィックの増加
トラックバックにより、他のブログからのリンクを介して、自分のブログに新しい読者が訪れる可能性があります。トラックバックを利用することで、相手のブログの読者層にも自分の記事が知られるようになります。
コミュニケーションとネットワーキング
トラックバックを使うことで、他のブロガーやウェブサイトのオーナーとコミュニケーションを図ることができます。相手の記事に対するコメントや反応をトラックバックで示すことで、コンテンツの共有や交流が促進されます。
SEO(検索エンジン最適化)
トラックバックを含む相互リンクは、検索エンジンのランキングに影響を与える可能性があります。質の高い相互リンクがある場合、検索エンジンはそれを良い指標としてサイトの評価を高める可能性があります。
ただし、トラックバックはスパムなどの悪用もされることがあるため、適切な管理やモデレーションが必要です。また、最近ではSNSやソーシャルメディアの普及により、トラックバックの利用は減少している傾向もあります。
これらはWordPressの基本的な設定の一部です。WordPressはカスタマイズ可能なプラットフォームで、機能を拡張するプラグインも多数利用できます。ウェブサイトの目的やニーズに応じて、さまざまな設定を調整して最適なサイトを構築できます。
2.まず最初にやっておきたいことは「SSL」化
![WordPressの基本設定](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/ie-2-150x150-20.webp?resize=500%2C265&ssl=1)
《管理画面》→《設定》から「http」を「https」に変更します。これでもういちどログインすると、検索窓の左に「保護されている通信」と表示されます。
WordPressのSSL化には、入会時に以下の手順を実行してあることが前提です。しかし、Xfree ではやりにくいので Xserver であることをご了承ください。
- まず、SSL証明書を入手する必要があります。一般的には、SSL証明書を発行してくれる認証局(Certificate Authority)やホスティングプロバイダから入手することができます。証明書のタイプには、無料のLet’s Encrypt証明書や商用証明書があります。
- WordPressの管理画面にログインし、プラグインやテーマなどを介してSSLを有効化する方法がいくつかあります。
- 「Really Simple SSL」や「WP Force SSL」などのSSLプラグインをインストールして有効化します。これらのプラグインは、自動的にWordPressの設定を変更し、SSLを有効化します。
- WordPressのテーマファイルの中には、URLをSSLに変更する必要がある場合があります。例えば、CSSやJavaScriptファイルに埋め込まれているURLをSSLに変更する必要があります。テーマファイルを編集する場合は、事前にバックアップを取ることをおすすめします。
- wp-config.phpファイルに以下のコードを追加することで、WordPress全体でSSLを有効化することができます。
define('FORCE_SSL_ADMIN', true);
if ($_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https') {
$_SERVER['HTTPS'] = 'on';
}
- WordPressの一般設定で、サイトのURLをhttps://から始まる形式に変更する必要があります。WordPressの管理画面で「設定」→「一般」に移動し、WordPressアドレスとサイトアドレスをhttps://で始まるURLに変更します。
- SSL化後、ウェブサイト内の内部リンクもhttps://で始まるように更新する必要があります。これには、「Better Search Replace」や「Velvet Blues Update URLs」などのプラグインを使用すると便利です。
https://ja.wordpress.org/plugins/better-search-replace/
これらの手順を実行することで、WordPressサイトをSSL化することができます。ただし、変更を行う前にデータベースやファイルのバックアップを作成することをおすすめします。
3.パーマリンクの設定
![パーマリンク設定](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/ie-3-150x150-16.webp?resize=500%2C238&ssl=1)
《設定》→《パーマリンク設定》で好きな方のラジオボタンをクリックします。%postname%
タグを含めるとリンクが理解しやすくなり、投稿が検索エンジンで上位に表示されるのに役立つ可能性があります。
パーマリンクには「URL スラッグ」というのがあります。デフォルトでは日本語で表示されますが、それだとコピーして貼り付けると長い記号になって表示されてしまい、SNS などにリンクを貼るには見栄えが良くありません。
![こんにちは](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/6-7-2.webp?resize=500%2C175&ssl=1)
あとは、半角英数字で文字列(スラッグ)を入力することをお勧めします。変更後、記事を投稿すればOKです。
- URL で見た場合、数字やアルファベットの羅列ではないのでどんな記事か直感的にわかる
- カテゴリが変わってもURLには関係ない
- 半角英数字だとシンプルな URL になるかもしれません。
パーマリンク設定は自由です。
4.テーマを編集する
《外観》→《新規登録》をクリックします。今回は無料ですが多機能の「Cocoon」を使います。Google の検索に「Cocoon」と入力し「Cocoon WordPress 無料テーマ」を選択します。《ダウンロード》をクリックします。
《親テーマ》をダウンロードします。管理画面に戻って《テーマのアップロード》→《ファイルを選択》→《ダウンロード》→ダウンロードしたのをクリックします。管理画面で《今すぐインストール》をクリックします。
「テーマのインストールが完了しました」と表示されるので《有効化》をクリックします。
《親テーマ》は元のデザインのことなのです。その下に《子テーマ》というのがあります。それをダウンロードします。子テーマを使うのがミソです。《今すぐインストール》ですね。《有効化》を押します。
更新
ダッシュボードに《更新》があるのでクリックします。常に最新版を更新しておきます。
記事の投稿
《新規追加》で新しく投稿できます。《タイトル》や《文字入力》ができます。右上の《プレビュー》を押すと公開前に見ることができます。
![](https://i0.wp.com/www13.a8.net/0.gif?resize=1%2C1&ssl=1)
2.WordPress の固定ページとカテゴリーページ
![WordPress の html 編集](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/6-1-12.webp?resize=920%2C517&ssl=1)
1.固定ページ
《メニューバー》に表示されます。《外観》→《メニュー》→《メニュー構造》に「メニュー名」を入力します。《メニュー作成》をクリック。左側に「固定ページ」とあるので「ホーム・アクセス」とかあるので☑を入れて《メニューに追加》をクリック。
![メニュー](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/6-2-7.webp?resize=500%2C362&ssl=1)
すると「メニュー名」に表示されます。さらにその下の《メニュー設定》でメニューの位置が表示されています。「ヘッダーメニュー」は上の細長いメニューバーのことです。ヘッダーモバイルメニューはスマホとかで、フッターメニューは、下の足元のメニューのことです。
「ヘッダーメニュー」にチェックをいれ《メニューを保存》をクリックします。これで「ホーム・アクセス」がメニューバーに表示されます。固定ページは一つひとつが独立したページです。「アクセス」「コンタクト」「プロフィール」などですね。
お問い合わせは「Contact」です。WordPress には「メール」の機能がないので「プラグイン」を使います。管理画面から《プラグイン》をクリックします。《新規追加》から《人気》をクリックします。《Contact Form7》を選びます。《今すぐインストール》をクリックします。
《有効化》をクリックします。管理画面に《お問い合わせ》が表示されるのでクリックします。
![お問い合わせ](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/6-4-6.webp?resize=500%2C163&ssl=1)
「お問い合わせ」の下の「ショートコード」をコピーします。それを管理画面から「お問い合わせ」ページを出して貼り付けます。
![お問い合わせページに貼り付け](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/6-5-4.webp?resize=500%2C191&ssl=1)
この画面は修正できます。管理画面の《お問い合わせ》から《フォーム》の名前を変えたり削除できます。追加したい場合は《フォーム》から例えば《電話番号》なども追加できます。《保存》をクリックします。
《メール》には先ほどの《電話番号》を追加、「差出人」の下に貼り付けしておきます。
2.「カテゴリー」の投稿ページ
《投稿》→《カテゴリー》です。《名前》「プログラミング」などを入力します。《スラッグ》には英語のアルファベットを入れます。
![カテゴリーページ](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/6-6-2.webp?resize=500%2C250&ssl=1)
ウィジェット
《外観》→《ウィジェット》を開き、サイドバーで不要なウィジェットを削除できます。ドラッグして移動させることもできます。左側にあるものを右側にもってくることもできます。
「ロゴ」を作るには
さまざまなアイコンがあります。
迷惑行為の防止
A kis met がいいのですが最新版の WordPress にはまだ対応してないようなので、WP Cerber Security, Anti-spam & Malware Scan を使用します。ハッカーの攻撃、スパム、トロイの木馬、および、ウイルスから WordPress を守ります。
ツリーメニューの作り方
《外観》→《メニュー項目を追加》をクリックすると右側に追加される。上下に移動もできます。下のメニューにしたい場合は右に少しドラッグして移動させるだけです。《メニューを保存》をクリックします。
3.Cocoon 設定
![Cocoon設定](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/6-1-13.webp?resize=500%2C120&ssl=1)
《スキン》:全体的なデザインを変えるとき
《全体》:色やフォントのほか、「サイドバーの位置」を左と右に変えることができます。
《ヘッダー》:レイアウトで見た目を変えられます。
《タイトル》:フロントページタイトルだけ「サイト名」だけ変更すればいいと思います。
《サイトの説明》:メタディスクリプションとして検索すると出てくるので必ず記載します。
《OGP》LINE などに自分のホームページを送った場合、表示される画像です。
《インディックス》:フロントページにいろいろな表示形式にできます。カードタイプに縦型2列にしたりとかもできます。
《通知》:「通知エリアの表示」にチェックを入れ、「通知メッセージ」に「お知らせ」と入力し、アドレスを入力すると表示されます。
《アピールエリア》:アピールエリアの表示で「フロントページのみで表示」を選ぶと、メニューバーの下に「画像」などを挿入できます。文字も入力できます。ボタンも入れられます。
《おすすめカード》:フロントページなんかに表示させます。メニュー選択からえらぶと写真4枚が表示されます。
《カルーセル》:フロントページのみで表示して、人気記事にチェックを入れて《変更をまとめて保存》をクリックすると、ズラーと人気記事の写真が並びます。
《AMP》:有効化をチェックすると、スマホなんかで一瞬にして写真が表示される機能です。
《高速化》:すべてチェック入れておけば表示速度が速くなります。
《企業用ホームページ》:《外観》→《テーマを追加》から「lightning」を選びます。「有効化」をクリックします。管理画面の《カスタマイズ》からすべて編集できます。
![](https://i0.wp.com/www13.a8.net/0.gif?resize=1%2C1&ssl=1)
3.WordPress の html ファイルは php ファイルのこと
![HTML](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/6-2-8.webp?resize=920%2C479&ssl=1)
WordPressのテーマファイルやテンプレートファイルのうち、一般的なファイル拡張子は「.php」です。これらのファイルは主にPHPコードを含み、ウェブサイトのコンテンツやデザインを動的に生成します。
1.PHPはWordPressのコア技術です
あり、ウェブページを動的に作成し、データベースから情報を取得して表示するために使用されます。テーマファイルは、WordPressの外観やレイアウトを制御し、コンテンツをデザインするための重要な役割を果たしています。
WordPressのテーマファイルの中には、HTML、CSS、JavaScript、PHPなどのコードが含まれています。ただし、これらのファイルがPHPであるということは、ウェブサイトの一般的な訪問者にはわかりません。WordPressはサーバーサイドでPHPを実行し、ブラウザには生成されたHTMLコードが表示されます。
ユーザーは、最終的にブラウザで表示されるHTMLコードを見ることになりますが、それがPHPで生成されたものであるかどうかは分かりません。
したがって、WordPressのテーマファイルはHTMLファイルとしても解釈できますが、内部的にはPHPコードが含まれていることを理解しておくとよいです。これにより、動的なウェブサイトを作成するための強力な機能と柔軟性が提供されます。
管理画面→「外観」→「テーマエディター」→「テーマの編集」が”場所”です。テーマを変えるとWordPressサイトの見え方も大きく変わります。PHP とは Webサイトのレイアウトや機能を使用者の必要に応じて設定を変更するひな形のことです。
おおまかなことしかいえませんが、具体的にはhtml ファイルは「php ファイル」になります。
2.その php ファイルを出してみます
しかしPHPを編集するのは難しいです。ファイルをFTPソフトでダウンロードし、編集後に改めてアップロードするようにしてください。
よく理解できない言葉を耳にした子どものような顔をしないでください。この画面で編集します。(HTMLとCSSの知識が必要です)
外観→サイトデザインやメニューの編集、ウィジェットのインストールなどをするところです。(記事を書くところは「投稿」です)
メディアとは、サイトに掲載する画像のアップロード・管理するところです。この「外観」はあくまでも「テーマの編集」だけです。簡単な修正は WordPress の管理画面からできますが、大きな修正はテーマ編集からということになります。
CSS や PHP を編集するときは必ず編集前のコードをコピーして保存ししておいてください。
![](https://i0.wp.com/www13.a8.net/0.gif?resize=1%2C1&ssl=1)
4.WordPress の「テーマを編集」
![WordPress の「テーマを編集」](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/PC-KATADA-920-×-300-px-920-×-200-px-920-×-100-px-300-×-100-px-920-×-460-px-920-×-560-px-920-×-460-px-3-1.webp?resize=920%2C460&ssl=1)
CSSやPHPの編集に慣れていればテーマのコードを編集してみるのもいいかもしれません。ただし《子テーマ》を作成して、変更内容が消失しないように注意します。
Webサイトを直接編集すると、編集途中で表示が崩れたり、エラーが発生してサイトが表示されなくなってしまうことがあります。そのため、編集するばあいローカル環境で行うようにします。
1.ローカル環境で編集する
ローカル環境とは、コンピュータ上でのみアクセス可能な環境のことを指します。インターネットに接続せずに、自身のコンピュータ内で作業や開発を行うことができます。
具体的には、ウェブサイトの作成や開発を行う際に、ローカル環境で WordPress を実行することができます。つまり、インターネット上のサーバーではなく、自分のコンピュータ上で WordPress をセットアップし、ウェブサイトを構築したり、テストしたりすることができるのです。
ローカル環境の利点はいくつかあります。
まず第一に、インターネット接続が不要なため、オフライン環境でも作業が可能です。また、ウェブサイトの開発やデザインの変更をテストする際に、公開サーバー上で実際のサイトに影響を与えることなく試すことができます。さらに、セキュリティやプライバシーの観点からも、ローカル環境での開発は安全です。
![テーマを編集](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/6-3-7.webp?resize=500%2C282&ssl=1)
ローカル環境で作業するためには、特定のソフトウェアやツールが必要になります。
InstantWPは、WordPressのローカル環境を簡単にセットアップするためのツールの一つです。これは自分のPC上で仮想環境を作って、そこでWordPress を動かすことができるものです。ローカル環境を構築するためのツールを使えば簡単に作れます。
テーマのファイルとして、関数ファイル(functions.php)であらゆるものが動くことになります。
たとえば、アイキャッチ画像、ウィジェットなどです。関数ファイルはすべてPHP で記述されているので、注意します。コードを気安くコピー&ペーストするのではなく、そのコードの機能をよく見て、理解してからにします。下図のように、「ヘッダー」「コンテンツ)」「サイドバー」「フッター」に分けられ、それぞれを「PHPファイル」で表現しています。
この画面では、中央に内容が表示されて、右側にテーマファイルが表示されています。サイトを編集したい場合は、この右側に表示されている該当のファイル名をクリックすると、選択したファイルの内容が表示されるので、そこを編集するのです。
一番下の 「tmp-user ▶」をクリックすると「body、header、main、footer」がでてきます。(このブログは「Cocoon」でつくられています。contents は main です。他のテーマだと、main が front-page.php になっているかもしれません。そのへんは推し量ってください)
![html の各範囲](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/6-4-7.webp?resize=500%2C608&ssl=1)
head に <meta>タグを入れたいばあいは、右のほうにある「tmp-user」を開くと「head-insert.php」がでてきますので、それをクリックします。ちなみにhead と header は別々の場所です。
- head :タイトルなど検索エンジン向けの情報や外部ファイルの読み込みを記述します。
- header:body の中にコンテンツを定義してタグを使って意味づけします。
amp-head-insert.php というのもありますが、Google AdSense の審査用コードは、head-insert.php のみに貼り付けます。amp-head-insert.php にも貼り付けてしまうと、AMP ページでエラーが出てしまいます。
「head」は「head-insert.php」、「Contents」は「main-before-php」、「footer」は「footer-insert.php」、この全体を「body-top-insert.php」で囲んでいるのです。
2.特定のページのみ適用させたいばあい
例えば、スタイルシートを「特定ページ」に貼り付けたいばあい、以下のようにします。
<?php if ( is_single() ): ?><link rel="stylesheet" href="sample.css" /><?php endif; ?>
これを、「固定ページ」のみ適用させたいばあい、「page」に変更します。
<?php if ( is_page() ): ?><link rel="stylesheet" href="sample.css" /><?php endif; ?>
「サイドバー」は、WordPress では「ウィジェット」と呼ぶ
編集は「外観」→「ウィジェット」です。「テキスト」もあります。リンクを貼ったり、画像を挿入したりすることができます。装飾したい場合は、「style.css」をクリック。もしくは、「外観」→「テーマ編集」の付属の CSS エディター から編集します。
コンテンツの html は次のとおりです。
![html として編集](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/6-5-5.webp?resize=500%2C264&ssl=1)
ここではサイドバーの HTML ソースの編集はできません。ソースをいじるときは「テキストエディタ」に切り替えます。
ただし、ここで注意していただきたいことがあります。それは、必ず「バックアップ」をとっておくことです。ともすれば「失敗」することもあります。あとで「消えてしまった~!」とか、間違ってカスタマイズして元に戻せなくなるリスクもあります。
5.WordPress バックアップのしかた
![WordPress バックアップのしかた](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/PC-KATADA-920-×-300-px-920-×-200-px-920-×-100-px-300-×-100-px-920-×-460-px-920-×-560-px-920-×-460-px-2-2.webp?resize=920%2C460&ssl=1)
WordPressのバックアップを取る方法はいくつかあります。
プラグインを使用したバックアップ
WordPressには多くのバックアッププラグインがあります。これらのプラグインを使用すると、自動的に定期的なバックアップを作成できます。一般的なプラグインには、UpdraftPlus、BackupBuddy、Duplicatorなどがあります。以下はUpdraftPlusを使った手順の例です:
- WordPressのダッシュボードにログインします。
- 「プラグイン」メニューから「新規追加」を選択します。
- 検索バーに「UpdraftPlus」と入力し、プラグインをインストールします。
- インストールが完了したら、「設定」メニューに「UpdraftPlus バックアップ/復元」が追加されるので、そこに移動します。
- 「現在すべての設定をバックアップ」ボタンをクリックしてバックアップを作成します。必要に応じて、バックアップのスケジュールやクラウドストレージへのアップロードを設定できます。
cPanelやサーバーパネルを使用したバックアップ
ウェブホスティングパネル(cPanel、Pleskなど)を使用している場合、サイトのファイルとデータベースのバックアップを手動で作成できます。以下は一般的な手順の例です:
- cPanelにログインします(ホスティングプロバイダーから提供される情報を使用します)。
- ファイルマネージャーを開き、WordPressのファイルを選択して圧縮(zip形式など)します。
- phpMyAdminなどのデータベース管理ツールを使用して、WordPressのデータベースをエクスポート(バックアップ)します。
FTPまたはSFTPを使用したバックアップ
FTPまたはSFTPを使用してサイトのファイルを手動でバックアップする方法もあります。
- FTPクライアント(FileZillaなど)を使用して、WordPressのファイルをサーバーからローカルコンピュータにダウンロードします。
バックアップを作成する際には、ファイルとデータベースの両方を含めることが重要です。また、バックアップを複数の場所に保存することでデータの安全性を確保することが推奨されます(例:ローカルコンピュータ、クラウドストレージ、外部ハードディスクなど)。
定期的なバックアップを作成し、重要な変更を加える前にバックアップを取ることを習慣づけることで、万が一の際にデータを回復する手助けとなります。
1.「設定」から「バックアップ」を選びます
「バックアップリストア」が表示されます。テーマ設定のバックアップをする際は、このボタンを押してください。バックアップが済んだら、まず、画面の上でマウスを右クリックしてください。すると、「検証」というのが一番下にあると思うのでクリックしてください。
![バックアップと検証](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/6-6-3.webp?resize=500%2C154&ssl=1)
右側に表示されるのが「デベロッパーツール」
ここで設定を変更して確認もできます。ブラウザは《Google Chrom》です。
ホームページは、サーバーから私たちに HTML ファイルを転送する仕組みですが、WordPress で作成したサイトにアクセスすると、データベースとサーバーFTPから必要な情報を引っ張ってきて Web ページとして表示されます。サーバーとデータベースの間に WordPress があるのです。
ヘッダー、コンテンツ、サイドバー、フッターなどバラバラのものをパズルのようにまとめて html が完成し私たちに送られるわけです。PHP は、Webサイトのレイアウトや機能をカスタマイズするテンプレートのことだったんですね。
6.WordPress のビジュアルエディターとコードエディター
![WordPress のビジュアルエディターとコードエディター](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/PC-KATADA-920-×-300-px-920-×-200-px-920-×-100-px-300-×-100-px-920-×-460-px-920-×-560-px-920-×-460-px-1-3.webp?resize=920%2C460&ssl=1)
Cocoonでは画面の上右端にある3つの●をクリックすると、「エディター、コードエディター」があるので、コードエディターをクリックします。するとhtml の画面が表示されます。コンテンツだけならここからでも編集できます。
1.ヘッダーを編集したい
![ビジュアルエディターとコードエディター切り替え](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/6-7-3.webp?resize=500%2C218&ssl=1)
ヘッダーを編集したい場合は、「header.php」。ワードプレスの場合<body>タグは「header.php」にあります。
2.サイドバーを編集したい
サイドバーを編集したい場合は、「sidebar.php」
「このページには AMP コンポーネントの「script」タグが必要ですが、このタグがありません。」とエラーが表示されています。このままではページの AMP ページが Google の検索結果に表示されなくなります。
![「このページには AMP コンポーネントの「script」タグが必要ですが、このタグがありません。」](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/6-8-2.webp?resize=500%2C306&ssl=1)
このサイトは「Cocoon」を使っていますので、以下、その対処法です。
![form の編集](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/6-9-2.webp?resize=500%2C375&ssl=1)
- WordPress の管理者メニューのテーマの編集画面を開きます。
- [外観] → [テーマエディター]を開きます。
- 編集するテーマから「Coccon Child」を選択します。
- [tmp-user]を開き、[amp-body-top-insert.php]を選択します。
- <?php //ログインユーザーも含めてカウントする場合は以下に挿入
?>の下に、広告コードを貼り付けます。 - [ファイルの更新]をクリックします。
3.コンテンツ(main)を編集したい
フッターを編集したい場合は、「main.php」。実は、</body> タグはテーマフッター「main.php」にあります。
フッターを編集したい
フッターを編集したい場合は、「footer.php」。実は、</body> タグはテーマフッター「footer.php」にあります。
フロントページを編集したい
「front-page.php」か「home.php」、または「index.php」
![](https://i0.wp.com/www13.a8.net/0.gif?resize=1%2C1&ssl=1)
7.WordPress の CSS を編集したい
![CSS](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/PC-KATADA-920-×-300-px-920-×-200-px-920-×-100-px-300-×-100-px-920-×-460-px-920-×-560-px-920-×-460-px-5.webp?resize=920%2C460&ssl=1)
![taka](https://i0.wp.com/pckatada.com/wp-content/themes/cocoon-master/images/man.png?w=1220&ssl=1)
CSS は、文字のフォントや色、大きさなどのデザインを変更するための言語です。
1.「style.css」ファイルを編集すれば反映されます
ちなみに「H3」は「h3」と同じです。本来は小文字です。h3 は見出しです。貼り付ける場所は決まっています。間違えて別の場所へ貼り付けないように。
![CSS を編集](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/6-26.webp?resize=174%2C300&ssl=1)
/必要ならばここにコードを書く/の下です!
/* H3 */
.entry-content h3{
border:none;
background:none;
padding: 0;
}
(これはデフォルトの形式を none(なし)にすることです。その下に新しい形式を直接入力するか貼り付けます)。
/* H3 */
.entry-content h3{
color: #000; /* 文字色 */
font-size: 1.5em; /* 文字サイズ */
background-color: #ebebeb;/* 背景色 */
padding: 10px;
border-left: solid 10px #008000; /* 左側に実線・色*/
}
2.フォントを変更する場合
スタイルシートの「font-family」を変更します。設定されている『sans-serif』はゴシック体です。「font-family:変更したいフォント名;」を入力すると、そのフォントに変わります。ヒラギノ角ゴシックにしたい場合は、「font-family:Hiragino Kaku Gothic StdN;」です。
Visual Studio Code などのテキストエディターも CSS を書く場所として使用することができます。私はテキストエディターを使用して CSS を書いてレイアウトや外観をカスタマイズすることが多いです。
追加
CSSに書いてテストしてから、そのままテーマエディターにコピペしてしまうこともあります。
《設定》→《パーマリンク設定》で好きな方のラジオボタンをクリックします。
3.テーマを編集する
《外観》→《新規登録》をクリックします。今回は無料ですが多機能の「Cocoon」を使います。Google の検索に「Cocoon」と入力し「Cocoon WordPress 無料テーマ」を選択します。《ダウンロード》をクリックします。
《親テーマ》をダウンロードします。管理画面に戻って《テーマのアップロード》→《ファイルを選択》→《ダウンロード》→ダウンロードしたのをクリックします。管理画面で《今すぐインストール》をクリックします。
「テーマのインストールが完了しました」と表示されるので《有効化》をクリックします。
《親テーマ》は元のデザインのことなのです。その下に《子テーマ》というのがあります。それをダウンロードします。子テーマを使うのがミソです。《今すぐインストール》ですね。《有効化》を押します。
更新
ダッシュボードに《更新》があるのでクリックします。常に最新版を更新しておきます。
記事の投稿
《新規追加》で新しく投稿できます。《タイトル》や《文字入力》ができます。右上の《プレビュー》を押すと公開前に見ることができます。《新規追加》→《タイトル》→《記事》
![部分的に編集したい](https://i0.wp.com/pckatada.com/wp-content/uploads/2023/03/6-1-14.webp?resize=500%2C160&ssl=1)
このばあいは、編集したいページにカーソルをもってきて、上の三つ玉から「HTMLとして編集」をクリックします。ると、「<p>○○</p>」と HTML の表示に変わるので編集します。ある程度 HTML の知識が必要ですがググればなんとかなるのではないでしょうか。編集したらまた、三つ玉をクリックし、「ビジュアル編集」にもどしておきましょう。
ボタンの色を変更したいときも、直接 HTML から編集した方が早い場合もあります。3つ玉をクリックすると「HTML編集」がありますから、ボタンの上でクリックします。すると「light-blue」になってるのでこれを「light-green」に変更するのです。
![mika](https://i0.wp.com/pckatada.com/wp-content/themes/cocoon-master/images/b-woman.png?w=1220&ssl=1)
3つ玉を思い出してね。
あとがき
サイトの制作を制作会社に依頼した場合や、運営を引き継いだ場合などは、どのようにサイトが構築されているのかが分かりづらいものです。WordPress の構造について理解していれば、どこのファイルを編集すればサイトのどこに反映されるのかわかります。
自分が書いた文章が間違いないかどうか推敲(すいこう)しない人はまずいないんじゃないでしょうか。誤字・脱字・情報の過不足・読みやすさを考慮して手直しをするばあい、1ページがすっぽり入るほど縮小して、まず全体を眺めます。ここで「読み手の視点」が生まれます。
つぎに、「もっと伝わりやすい言い回しはないか?」と自問自答します。
最後に、誤字・脱字がないか点検します。一度書いただけで満足な文章が書けるわけではありません。厳しい目で推敲・見直しをします。
コメント