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

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

2024-07-02

ケケンタ

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

この記事では

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

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

＼Web制作を仕事にしたいなら／

こちらの記事で

Web制作コース独学プラン

についてご紹介しています。

Web制作を10万円以下で学べるオンライン型プログラミングスクール｜忍者CODE

まずは無料相談してみる >>

￣￣￣

「仕事が忙しい」、「すぐに欲しい商品がある」という方、必見のサービス

　Amazon Prime　

by Amazon

日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる

最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る　
※ご注文の時間帯やお住まいの地域によります。

Amazonプライムの無料体験は「何度でも」利用可能

Amazonプライムの無料体験を何度も利用する方法

Amazonのカート画面で表示される「Amazon Primeの無料体験の案内」をクリック
会員の自動更新を解除しておく＝期限が来たら自動解約
１～３ヶ月ぐらいするとAmazonのカート画面で再度無料体験の案内が表示される

商品をカートに入れ、カート画面に行ったときに「無料体験の案内」が表示されていれば
1ヶ月間の無料体験を受け取ることが可能です。

ケケンタ

僕自身、過去に少なくとも３回は無料体験を利用しています。

※条件は不明ですが、解約後に一定期間が経過すると、再び「Amazon Prime無料体験の案内」が表示され、再度利用することが可能です。

Amazonで買い物をする　>>

各種ページの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' );