WordPressの外観エディターを使用する方法

wordpress-appearance-editor.png


これまで、ユーザーフレンドリーなさまざまなエディターを使用してWordPress CMSをカスタマイズする機会がありました。カスタマイザーでは、テーマがサポートするさまざまな外観オプションを利用できます。ただし、特定のオプションを超えてサイトをパーソナライズする場合は、WordPressの外観エディターについて知っておく必要があります。.

変更可能なWordPressの多くのファイルのうち、特に興味深いものが2つあります。 WordPressから直接編集できるテーマのテンプレートとスタイルシートファイルについて話している.

自分でコードの変更を検討する前に、WordPressに警告する必要があります。 バックアップを作成しません 影響を受けるファイルの。したがって、変更は永続的です.

外観エディターでテーマを編集する方法

WordPressについてさらに学習し、カスタムコードを入力して手を汚す準備ができたら、次の場所に移動します。 外観->編集者. この組み込みエディタを使用すると、テーマのテンプレートとスタイルシートファイルに保持されているコードを変更できます。開くと、現在のテーマが使用しているstyle.cssファイルが自動的に正面に表示されます.

ワードプレスの外観エディター

サイトの設定によっては、一部のファイルにアクセスできない場合があります。その場合、WordPressは警告メッセージを表示して、その特定のファイルのファイル権限を変更する必要があることを通知します。詳細については、 WordPressでファイルの権限を変更する方法.

編集するファイルを選択する方法

エディターを開くとすぐに、WordPressはアクティブなテーマの利用可能なすべてのテンプレートとスタイルシートファイルを表示します。非アクティブなテーマを編集する場合は、リストの一番上に移動し、ドロップダウンメニューからアイテムを選択して、[選択]ボタンをクリックします。 WordPressは選択されたテーマに関連するすべてのファイルをロードします.

テンプレート

ファイルを選択するには、ウィンドウの右側のリストに移動します。それぞれに名前とファイル名があり、以下の括弧内に示されています. ファイルを編集するには、それをクリックするだけです コードは左側のエディタに表示されます.

注意してください

スタイルシートファイルの編集は比較的安全ですが、PHPファイルを編集するとエラーが発生し、サイトが使用できなくなる可能性があります。外観エディターからPHPファイルを編集する場合は、十分に注意してください.

例:外観エディターを使用してフォントサイズを変更する方法

エディターの動作を示すために、Twenty Seventeenテーマの投稿のテキストのフォントサイズを変更します.

先に進む前に、少しの間、お客様の注意を払拭したいと思います。バージョン4.7では、WordPressが導入されました カスタムCSSを追加できる新機能 より迅速に。外観エディターでコードを編集する代わりに、 外観->カスタマイズ->追加のCSS スタイルシートに直接影響を与えずに、必要なカスタムCSSコードを記述できる場所.

要素を検査する

Google Chromeで要素を検査する

それでも外観エディタを使用してスタイルシートを直接編集する場合は、次の手順に従ってください。

  1. ブログから投稿を開きます
  2. 投稿のテキストを選択します
  3. 選択項目を右クリックして、「使用するブラウザに応じて」「検査」または「要素を検査」を選択します。
  4. 開いた新しいセクションまたはウィンドウで、強調表示された

    素子

要素の段落を検査

このクラスは、[スタイル]タブにも表示されている必要があります。スタイルをクリックすると、ブラウザでスタイルシートが開き、ブラウザから直接CSSを編集できるようになります。この関数を使用して、実際にサイトに変更を適用する前にカスタムCSSコードをテストできます。投稿のテキストのフォントサイズを変更したかったので、次のCSSコードに関心があります。

p {
font-size:50px;
}

変更を適用

ブラウザでいくつかのフォントサイズをテストした後、最も気に入ったフォントサイズを覚えておいてください。次に、エディターに進み、フォントを変更します。

  1. 案内する 外観->編集者
  2. まだ選択していない場合は、 スタイルシート(style.css) 右側のリストからファイル
  3. 「p」クラスを見つける
  4. 「font-size:50px;」を追加します(コード全体は上で書いたもののように見えるはずです)
  5. 「ファイルの更新」ボタンをクリックします

段落のフォントサイズを変更する

新しいスタイルが保存され、サイトをリロードする準備ができました。任意の投稿を開いて、テキストのサイズの変化を確認します。違いが見えず、コードを正しく調整したことが確かな場合は、 ブラウザのキャッシュをクリアするか、CTRL + F5を押します ページを更新する.

外観エディタを使用するときは注意してください

外観エディターは、テンプレートファイルとスタイルシートファイルをすばやく変更するための素晴らしいツールです。しかし、それを最大限に活用するには、行っている変更について完全に確信していることが重要です。 PHPファイルを変更すると、FTPで修正するまでサイトがロックされる可能性があります。したがって、PHPファイルを使用する場合は、元のバックアップを常に保持しながら、FTP経由で転送できるローカルファイルを使用することをお勧めします。スタイルシートを変更する場合は、数か月前に導入された追加のCSS機能を忘れないでください。.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map