この記事にはプロモーションが含まれています。

【WordPress】ページのURLや画像・CSSなどのパスを取得する方法【まとめ】

2024-07-022024-08-20

ケケンタ

こんにちは！　ケケンタです。

この記事では

WordPressで各種類のページのURLや
画像・CSS・jsファイルのパスを取得する方法

をまとめてご紹介します。

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

各種ページのURLを取得

トップページ

使用するテンプレートタグ

home_url()

<a href="<?php echo esc_url( home_url() ); ?>">トップページ</a>

投稿一覧ページ

「投稿一覧ページ」がサイトトップページに設定されている場合はトップページの項目をご覧ください。

使用するテンプレートタグ

home_url()

<a href="<?php echo esc_url( home_url('/投稿一覧ページのスラッグ') ); ?>">投稿一覧ページ</a>

<!-- 使用例 -->
<a href="<?php echo esc_url( home_url('/sample') ); ?>">投稿一覧ページ</a>

【WordPress】投稿一覧ページを作成する「２つ」の方法【オリジナルテーマ】

固定ページ

使用するテンプレートタグ

the_permalink()

<a href="<?php the_permalink( 固定ページID ); ?>">固定ページへのリンク</a>

<!-- 使用例 -->
<a href="<?php the_permalink( 30 ); ?>">固定ページへのリンク</a>

投稿個別ページ

使用するテンプレートタグ

the_permalink()

<a href="<?php the_permalink( 投稿ページID ); ?>">投稿個別ページへのリンク</a>

<!-- 使用例 -->
<a href="<?php the_permalink( 30 ); ?>">投稿個別ページへのリンク</a>

ループ内で使用する場合

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <!-- 投稿個別ページへのリンク -->
        <p>
          <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </p>
    <?php endwhile; ?>
<?php endif; ?>

カテゴリーアーカイブページ

使用するテンプレートタグ

get_category_link()

<a href="<?php echo get_category_link( カテゴリーID ); ?>">カテゴリーアーカイブへのリンク</a>

<!-- 使用例 -->
<a href="<?php echo get_category_link( 7 ); ?>">カテゴリーアーカイブへのリンク</a>

「現在のページのカテゴリー」の
アーカイブページリンクを出力したい場合

<!-- アーカイブページへのリンク -->
<?php 
 	$cat = get_the_category()[0];
    $cat_id = $cat->cat_ID;
?>
<a href="<?php echo get_category_link( $cat_id ); ?>">カテゴリーアーカイブへのリンク</a>

「すべてのカテゴリー」の
アーカイブページリンクをまとめて出力したい場合

<!-- カテゴリーアーカイブページへのリンク -->
<?php 
	$categories = get_categories();  
    if ( $categorie ) {
        echo '<ul>';
  	    foreach( $categories as $category ) {
	        echo '<li><a href="'. get_category_link( $category->term_id ) . '">'. $category->name . '</a></li>';
        }
        echo '<ul>';
    }
?>

もっとシンプルに出力する形で良ければ以下のコードが手っ取り早いです。
※オプションが色々あるため、使いこなせばカスタマイズ性は上記のコードよりも高いです。

<!-- すべてのカテゴリーのアーカイブページリンクを出力する -->
<?php wp_list_categories(); ?>

タグアーカイブページ

使用するテンプレートタグ

get_tag_link()

<a href="<?php echo get_tag_link( タグID ); ?>">タグアーカイブへのリンク</a>

<!-- 使用例 -->
<a href="<?php echo get_tag_link( 10 ); ?>">タグアーカイブへのリンク</a>

「すべてのタグ」の
アーカイブページリンクをまとめて出力したい場合

<!-- タグアーカイブページへのリンク -->
<?php
    $posttags = get_the_tags();
    if ( $posttags ) {
        echo '<ul>';
        foreach ( $posttags as $tag ) {
            echo '<li><a href="' . get_tag_link($tag->term_id) . '">' . $tag->name . '</a></li>';
        }
        echo '</ul>';
    }
?>

カスタム投稿一覧ページ

使用するテンプレートタグ

get_post_type_archive_link()

<a href="<?php echo get_post_type_archive_link( 'カスタム投稿のスラッグ' ); ?>">カスタム投稿一覧ページへのリンク</a>

<!-- 使用例 -->
<a href="<?php echo get_post_type_archive_link( 'custom_sample' ); ?>">カスタム投稿一覧ページへのリンク</a>

カスタム投稿個別ページ

使用するテンプレートタグ

the_permalink()

<a href="<?php the_permalink( カスタム投稿ページID ); ?>">カスタム投稿個別ページへのリンク</a>

<!-- 使用例 -->
<a href="<?php the_permalink( 20 ); ?>">カスタム投稿個別ページへのリンク</a>

ループ内で使用する場合

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <!-- カスタム投稿個別ページへのリンク -->
        <p>
          <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </p>
    <?php endwhile; ?>
<?php endif; ?>

画像・CSS・jsファイルまでのURLを取得

画像・CSS・jsファイルまでのパスを取得する際に使用するテンプレートタグは共通しています。

使用するテンプレートタグ

親テーマ内のファイルを使用する場合……get_template_directory_uri()
子テーマ内のファイルを使用する場合……get_stylesheet_directory_uri()

画像ファイル

画像ファイルが
「親テーマ」→「assets」→「img」ディレクトリ
に配置されているという想定です。

<!-- 使用例 -->
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/sample.jpg">

CSSファイル

CSSファイルが
「親テーマ」→「css」ディレクトリ
に配置されているという想定です。

<!-- 使用例 -->
<link href="<?php echo get_template_directory_uri(); ?>/css/sample.css" rel="stylesheet" />

functions.phpでCSSファイルを読み込む場合

function my_add_css_files() {  // 関数名は任意

  // CSSの読み込み
  wp_enqueue_style( 'sample',　get_stylesheet_directory_uri() . '/css/sample.css' );

}
add_action( 'wp_enqueue_scripts', 'my_add_css_files' );

第１引数は別の処理でsample.cssを扱う際に用いる「ハンドル名」（任意の名前）

jsファイル

「親テーマ」→「js」ディレクトリ
に配置されているという想定です。

<!-- 使用例 -->
<script src="<?php echo get_template_directory_uri(); ?>/js/sample.js" />

functions.phpでjsファイルを読み込む場合

function my_add_js_files() { // 関数名は任意

  // jsファイルの読み込み
  wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/sample.js', array('jquery'), false, true );

}
add_action( 'wp_enqueue_scripts', 'my_add_js_files' );