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
関連記事
-
-
CodeIgniter4の各種設定項目のまとめ記事
CodeIgniter4.4.4の各種設定項目を後から確認できるようまとめておき ...
-
-
CodeIgniter4&Bootstrap&jQueryで簡易版お問い合わせページの作成
CodeIgniter4.4.4&Bootstrap&jQuer ...
-
-
CodeIgniter4 & reCAPTCHA でお問い合わせフォームを作成する方法
以前CodeIgniter4.4.4で簡易的なお問い合わせページを作成したが、今 ...
-
-
CodeIgniter4でコントローラ実行の前後に指定したイベントを実行する方法
CodeIgniter4で特定の条件の場合は指定したページにリダイレクトさせたい ...
-
-
CodeIgniter4で特定のページにアクセスがあった際に301リダイレクトさせる方法
CodeIgniter4で特定のページにアクセスがあった際に301リダイレクトさ ...