Codeigniter4で外部ファイル(CSS / JS)の読み込みと共通パーツ化する方法
2024/01/19
Codeigniter4.4.4でCSS及びJavaScriptファイルを設置しページ内で読み込ませたい。また、それらを利用しヘッダーやフッター等、サイト内の共通パーツを作成し複数のページから使用したい。以下に対応方法をメモ。
目次
CSS / JavaScriptファイルの読み込みまで
baseURLの設定
baseURLを設定するため「/codeigniter4/.env」ファイルに以下を追記する。URL部分は適宜変更。
app.baseURL = 'https://test.com/codeigniter4/'
CSS / JavaScriptファイルの設置
「/codeigniter4/public/」ディレクトリ内に設置する。今回は「/codeigniter4/public/assets/css/」「/codeigniter4/public/assets/js/」のようにディレクトリを作成し、各種ファイルをアップロードした。
読み込み方法
Views内のファイルでは以下のように呼び出す。
<link href="<?php echo base_url('assets/css/test.css');?>" rel="stylesheet">
<script src="<?php echo base_url('assets/js/test.js');?>"></script>
共通パーツの読み込みまで
ヘッダー、フッターの作成
「/Views/template/」ディレクトリを作成し以下ファイルをアップロードする。
header.php
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hello wold</title>
<link href="<?php echo base_url('assets/css/bootstrap.css');?>" rel="stylesheet">
<script src="<?php echo base_url('assets/js/bootstrap.js');?>"></script>
</head>
<body>
<header>
ヘッダー
</header> <footer>
フッター
</footer>
</body>
</html>共通パーツの読み込み
Controllersからは以下のようにして共通パーツを読み込む。
<?php
namespace App\Controllers;
class Test extends BaseController
{
public function index()
{
$data = [
'page_title' => 'テストタイトル',
];
echo view('template/header');
echo view('page', $data);
echo view('template/footer');
}
}
参考サイト
https://ci-trans-jp.gitlab.io/user_guide_4_jp/general/views.html
関連記事
-
CodeIgniter3で共通の変数と定数を設定する方法
CodeIgniter3系で共通する配列が入った変数と、定数を設定したかった。以 ...
-
CodeIgniter3でCronを実行する方法
CodeIgniter3系で特定の処理をCronで自動実行したかった。以下に設定 ...
-
CodeIgniter4の各種設定項目のまとめ記事
CodeIgniter4.4.4の各種設定項目を後から確認できるようまとめておき ...
-
CodeIgniter4で祝日一覧APIにCURLでリクエストし結果をファイルキャッシュする方法
Codeigniter4.4.4で祝日一覧APIにCURLでリクエストしたい。尚 ...
-
Codeigniter3で異なるデータベースを使用する
Codeigniterで2つのコンテンツがあって、それぞれ別のデータベースを使用 ...