ワードプレスのテーマのHTMLを編集してみる

WordPressテーマのHTMLを編集する方法

WordPressテーマは、PHPとHTML(CSS,JAVASCRIPT)の複合的なプログラム群です。テーマファイルはワードプレスのwp-content/themes/あなたの選択しているテーマ フォルダに含まれています。(子テーマを利用している場合は子テーマと親テーマフォルダ両方に含まれているファイルが対象となります)
テーマファイルをどのように編集するのかその基本的な事項を解説いたします。

HTML、WordPress、PHPについて

HTML、WordPress、PHP がどのように連携して動作するかについては、下記の記事も参照されてください。
ワードプレスのテーマのプログラム構造の基礎
ワードプレスのactionとfilter

WordPressテーマを編集する

この例では、Twenty TwentyテーマのフッターのHTMLを編集し、著作権表示を編集・削除してみます。WordPressダッシュボードの「外観」→「テーマエディタ」を選択し、右サイドバーにあるfooter.phpを選択します。

ファイルを見てみましょう。PHPコードが混在しているのがわかるかと存じます。このコードでHTMLページにフッタークレジットを出力しています。

<div class="footer-credits">
<p class="footer-copyright">&copy;
<?php
echo date_i18n(
/* translators: Copyright date format, see https://www.php.net/date */
_x( 'Y', 'copyright date format', 'twentytwenty' )
);
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
</p><!-- .footer-copyright -->
<p class="powered-by-wordpress">
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentytwenty' ) ); ?>">
<?php _e( 'Powered by WordPress', 'twentytwenty' ); ?>
</a>
</p><!-- .powered-by-wordpress -->
</div><!-- .footer-credits -->

そのコードは以下の文字列に変換されます。
© 2020年 サイト名 Powered by WordPress

上のコード部分を丸ごと消すと、フッタークレジットが表示されなくなります。

独自のフッタークレジットを追加したい場合は、オリジナルのコードをこのように変更します。<p

<class="powered-by-wordpress">
<a href="クレジットのリンク先">
オリジナルなフッタークレジット文字列
</a>
</p><!-- .powered-by-wordpress -->

更新ボタンをクリックして編集内容を保存します。

※ボタンが表示されない場合は、FTPアプリケーションを使用してファイルのパーミッション(書き込み権限)を変更する必要があるかもしれません。パーミッションを変更するというのは複雑に聞こえますが、通常は単にFTPアプリケーションでファイル名を右クリックして、パーミッションを変更するためのオプションを選択し755にするだけです。

まとめ

ご覧のように、WordPress テーマの HTML を編集することはそれほど難しくありません。このチュートリアルでは非常に基本的な変更を行っただけですが、より複雑な編集のための初歩としましてはこれで問題ございません。

このコンテンツは役に立ちましたか?

関連コンテンツ

コメントを投稿する


上の計算式の答えを入力してください