*

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

公開日: : 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“/>
</a>
</p>
<!– ロゴ又はブログ名ここまで –>

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

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

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

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


↓  ↓  ↓  ↓



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

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

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


スポンサーリンク



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


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

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

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


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

こんな感じです


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

</div>
<!– /gazou —

の前に移動します。


Stinger8 カスタマイズ さいごに


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

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



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

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



にほんブログ村

スポンサーリンク




スポンサーリンク




Message

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


クリームパン足?足のむくみには名前があった・・対処方法は

なんだか最近足のむくみ方がかわってきました。 今まではふくら

イメージマップがスマホでずれる!プラグインで簡単解決

イメージマップがスマホでは位置がずれてしまい、予期せぬところにリンクし

Stinger8トップへ戻るボタンのアイコン変更&自作画像に変更

前回はStinger8のデフォルトの「ページトップへ戻る」ボタンの背景

Stinger8カスタマイズ トップへ戻るボタンの背景色変更

Stinger8のカスタマイズをしていて、下の方にスクロールした時に「

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

Stinger8のヘッダー画像を変えてみましたが、タイトルを画像にいれ

→もっと見る

  • こんにちは。波空です

    好きなことを自由にやりたくて
    アフィリエイトにチャレンジ中

    好きなものは
    アニメ・漫画・ゲーム・お絵描き・
    映画を観ること・パソコンで遊ぶこと
    ・チョコレート・中島みゆきさんの歌・・

    やりたいことは・・
    空を飛びたい・馬に乗って自由に
    走り回りたい・猫を飼いたい・・

    いろいろあるけど、
    まずは資金と自由な時間を確保
    しないと進まない。
    日々どうしたらできるか考えながら
    リアル仕事に追われています。

PAGE TOP ↑