*

Stinger8カスタマイズ タイトルをロゴ画像に phpのコピー

公開日: : 最終更新日:2020/08/12 WordPress

 

Stinger8のヘッダー画像を変えてみましたが、タイトルを画像にいれたので、もう一度画像を替え高さを120に変更。

タイトルをロゴ画像にしてメニュー位置も変えてみました。

そのためには子テーマでheader.phpを変更する必要があります。

今回は子テーマに親テーマからphpファイルをコピーする方法から。

スポンサーリンク

 

Stinger8のヘッダーのカスタマイズ

カスタマイズ用に子テーマの準備

子テーマで編集しようと思っても子テーマには最初から編集できる子テーマは、「functions.php」と「style.css」しかありません。

これら以外のファイルを編集したい場合は、子テーマとして編集できるように、追加する必要があります。

追加するには、親テーマからファイルをコピーします。

FTPで、「header.php」ファイルをコピーするには

FTPツールなどを使って「STINGER8」のファイルを子テーマの方にコピーします。

FTPソフトを使用して、親テーマから目的のphpファイルをダウンロードし、そのまま子テーマにアップロードするというのが一般的な方法です。

私はFTPソフトはFileZillaを使いました。

インストールや使い方はこちらで記事にしていますので参考にしてください。

まず、FTPソフト経由で親テーマディレクトリから必要なphpファイルをダウンロードします。

FileZillaを起動したら、サーバーに接続して、Stinger8をインストールしてある

ドメインのpublic_html⇒wp-content⇒themes⇒stinger8と開きます。

今回はheader.phpを編集したいのでheader.phpファイルを右クリックしてダウンロードをクリックします。

ローカルの開いているフォルダ内にダウンロードされます。

 

 

(※図の例では、ローカルを前に開いたところのままにしていたので、そこに入ってしまいました(^^;)みなさんは任意のフォルダを開いて作業してください)

それを子テーマディレクトリにアップします。

右側の欄のStinger8 childフォルダを開いておいてから、

ローカルにダウンロードしたheader.phpファイルを右クリックします。

メニューからアップロードをクリックするとStinger8 childにheader.phpファイルがコピーされます。

ドラッグ&ドロップでもできると思います。

 

 

途中でファイルを開いたりすることが無いので、文字化けエラーなどが起こりにくいです。

また、一度ローカルにダウンロードするので、誤って別のディレクトリにアップロードしてしまっても、再アップロードができます。

デフォルトのバックアップも取れるので安全ですね。

アップロードしてからダッシュボードの「外観」⇒「テーマの編集」を開いてみると

Stinger8 childに「header.php」がちゃんと追加されていました(^^)

 

 

ファイルをコピーすると、「テーマの編集」画面(子テーマ)からファイルの編集が可能になります。

子テーマを使ってカスタマイズします

 

サイトタイトルをロゴ画像に

サイトタイトルをロゴ画像にするには、先にロゴ画像を用意します。

簡単な方法としては、Web上で簡単にテキスト画像ができるサイトCool Textを利用すると楽です。

無料で利用できます。

Cool Textにアクセスするといろいろなロゴサンプルが並んでいます。

一覧から使いたいロゴスタイルを選ぶだけです。

詳しい使い方は「WordPressのタイトルロゴ作成 Cool Textの使い方」を参照してください。

作ったロゴ画像はメディアにアップ(保存)しておきます。

保存の時のURLをメモしておきます。

 

 

★URLは長い場合は、隠れている部分があるので、スクロールして確実に全部メモします。

子テーマ「STINGER8 Child」のテンプレート項目にある「テーマヘッダー(header.php)」を選択します。

「<!– ロゴ又はブログ名 –>」で始まる以下のCSSコードを探します。


<!– ロゴ又はブログ名 –>
<p class=”sitename”>
<a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”>
<?php echo esc_attr( get_bloginfo( ‘name’ ) ); ?>
</a>
</p>
<!– ロゴ又はブログ名ここまで –>

見つかったら4行目の

<?php echo esc_attr( get_bloginfo( ‘name’ ) ); ?>」というコードを、

以下のコードに書き換えます。

<!– ロゴ又はブログ名 –>
<p class=”sitename”>
<a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”>
<img src=”画像URL</span >”/>
</a>
</p>
<!– ロゴ又はブログ名ここまで –>

「画像URL」の部分は、ロゴ画像を保存した時にメモした画像のURLをいれます。

URLが間違っていると画像が正しく表示されません。

その時は入力に誤りがないか確認してみてください。

先程のCSSコードを書き換えると以下のようなコードになっていると思います。

 

↓  ↓  ↓  ↓

 

「ファイルを更新」をクリックします。

ブログタイトルが指定したロゴ画像に変わります。

サイトを表示で確認します。

 

 

ヘッダーメニューの位置の変更

ロゴ画像に変更したことでブログイメージが変わりましたが、ヘッダー画像の上にヘッダーメニュー(グローバルメニュー)があるのが気になります。

画像の下に移動してみました。

ダッシュボードで、外観⇒テーマの編集と開き、子テーマになっていることを確認してから、テーマヘッダー(header.php)をクリックします。

ヘッダーメニューの記述をヘッダー画像記述の下に移動するだけでいいんですね(^^)

こんな感じです

<?php get_template_part( ‘st-header-menu’ ); //カスタムヘッダーメニュー ?>の部分を

</div>
<!– /gazou —

の前に移動します。

 

Stinger8 カスタマイズ さいごに

こちらが今日のカスタマイズ分です(^^)

クリックすると新しく作ったサイトにジャンプします。

 

 

やる前は、子テーマに header.php をコピーと書いてあっても、具体的にどうやるのさ!?なんて思いつつの作業でしたが、なんとかなるもんですね(^^;

同じように、ささいな事でつまづいている方もいるかもしれないと思いながらの記事書きです。めげずにがんばりましょう!

 


にほんブログ村

スポンサーリンク




スポンサーリンク




Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


霧と雲は同じもの?! 霧と靄と霞とは?それってなにが違うの?特徴と違い

少し前、朝の天気予報の時「霧(きり)と靄(もや)と霞(かすみ)の違

気象や天気に関する記事一覧

お天気や気象に関してはニュースで聞いてもよく解らないことがあります

ガラケーとスマホ2台持ちをデュアルSIMで1台のスマホに!

  今までガラケーとスマホの2台持ちでもSIMフリーを

マスクを外した場合は?食事やお茶飲みでの外したマスクを置くには

  外出の時にはマスク。 人混みでもマスク。 でも

レジ袋有料化 レジ袋の種類とサイズと特徴 買うならどれがいい?

レジ袋有料化が2020年7月から実施されてからエコバッグを持参で買

→もっと見る

  • こんにちは。波空です

    好きなことを自由にやりたくて
    アフィリエイトにチャレンジ中
    好きなものは・・・アニメ・漫画・ゲーム・お絵描き・
    映画を観ること・パソコンで遊ぶこと
    やりたいことは・・いろいろあるけど、まずは資金と自由な時間を確保しないと進まない。日々どうしたらできるか考えながらリアル仕事に追われています。

  • 手軽に雑誌が読める!
    楽天マガジン

PAGE TOP ↑