コレナレ!お役立ち情報!
学習

wordpressでテーマの画像を設定するには?

コンピューター画像

wordpressで初めてテーマをカスタマイズするとき、「どうやって編集するの?」「画像の表示はどうするの?」などと悩む方は多いでしょう。

今回は初心者の方に向けて、wordpressのカスタマイズの基礎を説明していきます。画像の設定方法などを話していきますので、今後の参考にしてください。

この記事を読むことで、「何をすればわからない」という状態から抜け出せるしょう。

wordpressのテーマディレクトリに画像ファイルを入れよう!

そもそも、テーマファイルの場所がわからないとカスタマイズができませんね。テーマファイルはwordpressディレクトリの「wp-content -> themes」の中にあるので、確認してみてください。

各テーマのディレクトリ内に必要な画像ファイルをアップロードしていきましょう。

wordpressのテーマ管理・・・スクリーンショット画像を設定するには?

wordpressでのテーマのスクリーンショットの設定方法ですが、テーマのディレクトリ内にscreenshot.pngのファイルを置き、FTPでアップロードすると自動的に認識されます。

wordpressの場合、screenshot.pngのサイズは縦横比を3:4で作成しましょう。

wordpressでオリジナルテーマのサムネイル画像を設定するには?

wordpressでオリジナルテーマを作成したら、ダッシュボードのテーマ選択画面に表示されるサムネイル画像を設定しましょう。

画像をwordpressのindex.phpやheader.phpが入っているフォルダ内にアップロードしましょう。これで、テーマサムネイルに画像が入ります。この方法なら画像の変更も容易ですね。

wordpressのテーマフォルダの画像をテーマファイルで表示させるには

wordpressでオリジナルテーマを作成していると、テーマフォルダ内の画像をテーマファイルに表示させたくなることがたくさんあるでしょう。

このとき、初心者の方はCSSの背景などに指定するように、相対パスを記述しようとします。しかし、相対パスでは画像の表示ができないので注意が必要です。

相対パスでは表示できないにしても、毎回絶対パスで書くのは大変ですね。

そのようなときは、と記述すると、画像を表示できます。

wordpressのテーマディレクトリに画像を読み込みたい!URLを取得するには?

wordpressでは画像やスクリプトファイルの読み込みにURLを使います。そして、テーマディレクトリを取得するには「get_template_directory_uri()」を使用します。

 

この結果、次のようなURLが入ります。

http://localhost/minimalist/wp-content/themes/minimalist

まとめ

いかがでしたか。今回はwordpressのオリジナルテーマについて、画像の設定方法を説明してきました。初心者の方にはwordpressは難しいかもしれませんが、使っていくうちに慣れていくでしょう。

この記事の内容を実践することで、wordpressのカスタマイズをさらに上達させることができるでしょう。

※Wordpressを極めるには自宅で簡単にオンラインコースで学ぶこともできます。好きな時間に自分のペースで学べるオンラインコースは独学よりも実は最短コースで学習できる勉強法です。

オンラインコースはネットを検索すれば沢山見つかりますが、その中でもカリキュラムが充実してチャット形式で質問もできるコチラのコースがオススメです。
⬇︎
WordPressコース

関連記事