CSSでWordPressテーマをカスタマイズする方法
CSSでWordPressテーマをカスタマイズする方法を学びたいときは、まず知っておく必要があることの一つは、テーマ自体
テーマファイルを編集するプロセスは、CSSまたはHTMLをカスタマイズする場合でも効果的に同じです。
だから、同じ地面を後退しないようにするには、”WordPressテーマでHTMLを編集する方法”と”XamppでWordPressをローカルにインストールする方法”を見て、次のことを学んでくださ:
- テーマエディタを介してファイルを編集する
- FTPまたはリモート接続を介してファイルをダウンロードしてアップロードする
- 子テーマ内で変更を行うことを検討すべき理由
- XAMPPを介してオフラインで編集
テーマファイルを編集する方法については、このチュートリアルでは、これらのトピックについて学ぶことによってWordPressでcssを編集する方法に焦点を当てていきます:
- テーマカスタマイザーを介してカスタムCSSを追加する方法
- テーマが使用しているスタイルシートを識別する方法
- テーマの特定の部分をカスタマイズするために、どのCSSを変更する必要があるか、どこで識別する方法
注:この記事では、CSSの基本的な知識を持っていることを前提としていますが、必ずしも編集する方法ではありませんwordpressのcss。
プレミアムWordPressのテーマとプラグイン
私たちが開始する前に、あなたはCodeCanyon上のThemeForestとWordPressのプラグイン上のWordPressのテーマの数千を探索することができます忘れな これらの高品質のWordPressのテーマやプラグインを購入し、あなたとあなたの訪問者のためのあなたのウェブサイトの経験を向上させます。
WordPressのテーマカスタマイザーでCSSを編集する方法
WordPressには、独自のカスタムCSSコードを追加できる専用の領域があります。 このコードは、テーマのデフォルトのスタイルを上書きするように適切なタイミングでロードされ、このアプローチを使用してもテーマファイルに直接変更
WordPressの管理パネルの左サイドバーメニューで外観>カスタマイズに移動します:
これは、あなたがメニュー項目の追加CSSをクリックすることができ、テーマのカスタマ:
大きなフィールドが表示され、そこに好きなカスタムCSSを追加できます:
カスタムコードの追加が完了したら、左側のサイドバーの上部にある青い公開ボタ
テーマのスタイルシートを識別する方法
テーマカスタマイザーでAdditonal CSS領域を使用せず、代わりにテーマCSSを直接編集したい場合は、テーマが実際にスタイ
ほとんどの場合、テーマはWordPressの標準構造を使用し、”style”という名前のファイルを持ちます。css”テーマのルートディレクトリにあります。 あなたは常に任意のテーマでそれを見つけるので、実際には、これは不可欠なテーマファイルです。
しかし、編集のためにそれを開くと、コードが空であり、開発者がテーマ内の他の場所からスタイリングをロードしていることがわかります。 または、複数のスタイルシートファイルにロードされていることもあります。
テーマで使用されているスタイルシートを確認するには、二つの方法があります。
ヘッドコードの検査
最初の方法は、テーマの<head>コードを検査することです。 これを行うには、ページ上の任意の場所を右クリックして[ページソースの表示]を選択し、<head>...</head>タグを見つけます。これらのタグの間で、rel='stylesheet'も持つ<link>要素を探します。 それからそれらのどれがあなたの主題の登録簿から来ているか見るために見なさい。 スタイルシートのUrlは、テーマ構造内のどこでそれらを見つけるかを教えてくれます。
サイトのすべてのスタイルシートを一つのファイルに結合して縮小するプラグインを実行している場合、このテクニックは機能しません。 代わりに、functionsファイルをチェックするテクニックtwoを使用します。
関数ファイルをチェックする
テーマがスタイルシートを使用するたびに、wp_enqueue_style()という名前の関数を介して、使用したいファイルをWordPressに指示する必要があ したがって、この関数の使用を見つけることによって、テーマがどのスタイルシートをロードするかを正確に見ることができます。
すべてのテーマには、”functions”という名前のファイルがあります。php”は、そのルートディレクトリにあります。 通常、wp_enqueue_style()関数の使用はこのファイルに含まれているので、それを開いて関数名の検索を開始します。
wp_enqueue_style()関数のインスタンスを見つけるときは、2番目のパラメータの括弧の間、つまり最初のコンマの後のテキストのビットを調べます。 このテキストには、スタイルシートの場所が表示されます。 例えば:
wp_enqueue_style('main-style', get_template_directory_uri() . '/css/mainstyle.css');
上記のコードでは、2番目のパラメータは次のとおりです:
get_template_directory_uri() . '/css/mainstyle.css')
これは、スタイルシートが”css”という名前のテーマサブディレクトリにあり、そのファイル名が”mainstyle”であることを示しています。css”。
どのCSSを変更するかを特定する方法
テーマCSSに追加または編集する方法を知ったら、次に学ぶべきことは、実際に変更する必要があるコードを見つ
これを行う最善の方法は、ブラウザで開発者ツール、理想的にはツールの品質のためにChromeまたはFirefoxのいずれかを使用することです。
たとえば、投稿タイトルのフォントサイズを変更したいとしましょう。 投稿タイトルのいずれかを右クリックし、”検査”オプションを選択します:
これにより、開発者ツールパネルが開きます。 そのスタイルタブでfont-sizeプロパティを探します。
表示されない場合は、ブラウザに親または子要素が表示される可能性があるため、要素タブで、投稿タイトルテキストの形状を正確に強調表示し、font-sizeプ:
次に、[スタイル]タブで、font-sizeプロパティの値を変更してみてください。 ブラウザウィンドウにテキストの変更サイズが表示された場合は、正しいCSSが見つかったことがわかります。
このCSSがスタイルシートのどこにあるのかを知るには、font-size値を編集した場所の右上を見てください。 ファイル名、コロン、数字が表示されます。
ファイル名は、コードがどのスタイルシートにあるかを示し、コロンの後の数字は、そのコードを見つける行を示します。 たとえば、上の画像は”スタイル”のコードを示しています。4054行目のcss”ファイル。 テーマスタイルシートを直接編集している場合は、それを開いて問題の行番号に移動し、CSSを変更することができます。
テーマカスタマイザーの追加CSSフィールド、または子テーマ内で作業している場合は、元のCSSと同じセレクタをターゲットにする必要があります。
ブラウザ開発者ツールに戻り、変更したばかりのfont-sizeプロパティの上にあるセレクタを探します。 これは、私たちが見たスタイルシートファイルと行番号の指定の左側にあります。
そのセレクタ全体をコピーしてカスタムコードに貼り付け、それを使用して変更されたfont-size値を正しくターゲットにします。
常にベイクインテーマオプションをチェック
CSSのカスタマイズのトラブルに行く前に、常に開発者がすでにテーマにベイクインしている可能性
テーマには、多くの場合、カスタムコードを必要としない非常に包括的なカスタマイズオプションがあります。 そのため、CSSを編集する前に、必要な変更を行うためのプッシュボタンの方法が既にあるかどうかを確認することで、多くの時間を節約できます。
WordPressのテーマをカスタマイズする方法ステップバイステップ
WordPressのテーマのCSSとHTMLをカスタマイズする方法について話しましたので、どこから始めればよいのか少しわからないかもしれません。 それでは、従うべき手順の基本的なリストに物事を煮詰めてみましょう:
- テーマカスタマイザーをチェックして、
- にしたい変更を容易にするオプションが既にあるかどうかを確認します。
- 単純なカスタムCSSを追加する必要があテーマは、構築されたテーマエディタでwordpressを使用します
- テーマに直接深さの変更の詳細については、ftp、リモート接続、または完全にオフラインで作業のいずれか XAMPP
- を使用して編集方法を選択したら、サイトの
<head>コードを調べるか、テーマの”関数”を調べて、テーマのスタイルシートを特定します。php”wp_enqueue_style()関数 - を使用するために、ChromeまたはFirefox開発者ツールの検査機能を使用して、変更する必要があるCSSの特定の行とそれに関連するセレクタを見つけます
上記のすべてを掘り下げて慣れると、WordPressがどのようにカスタマイズ可能であるかがわかり始めます。
あなたはそれを知っている前に、あなた自身の完全にオリジナルの子供のテーマを作り、すべてあなた自身のデザインを作成することになります。
そして、”WordPressで子テーマを作る方法”を学ぶことは、このシリーズの次のチュートリアルです。 お楽しみに！