勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

Codeigniter3で外部ファイル(CSS / JS)の読み込みと共通パーツ化する方法

   2024/01/30  PHP CodeIgniter

CodeigniterでCSSやJSファイル等の外部ファイル読み込みたかった。また、それをヘッダーやフッターとして別ファイル化し、共通のパーツとして使いたかった。設置場所や読み込み方法が分からなかったので調べた結果をメモ。尚、Codeigniter4系の場合はこちらの記事を参照。

 

設置場所

Codeigniterディレクトリの直下でapplicationとかsystemとかある階層にcssなりjsなりディレクトリを作成する。

また、同階層に以下htaccessファイルを置いてルーティングされないようにする。

RewriteEngine on
RewriteCond $1 !^(index\.php|images|.+\.css$|.+\.js$|.+\.png$|.+\.jpg$|robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]

尚、フォントファイルや動画ファイルを呼び出したい場合はRewriteCondのところに拡張子とかを追記していく。

 

読み込み方法

viewディレクトリ直下のファイルで以下のように呼び出す。

<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/function.js"></script>

 

共通のパーツとして使う

例えばviewディレクトリ直下にheader.phpを作って、以下のように記述する。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php echo $title;?></title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <script src="js/function.js"></script>
</head>
<body>

そして実際に使う場合はcontrollersディレクトリ直下のファイルで、以下のように記述するとheader.phpとコンテンツであるindex.phpが呼び出される。また、header.phpには$header['title']が$titleという形で渡される。

public function index()
{
    $header['title'] = 'タイトル';
    $this->load->view('header', $header);
    $this->load->view('index');
}

 

その他

ヘッダー、フッター、メニューあたりはパーツ化しておいてヘッダーはSEO関連の内容を呼び出し時に渡す形で良さそう。

あとCSSを呼び出すときは以下の形でも良いみたい。

#コントローラーの方で$this->load->helper('html');でヘルパーを読み込みしておく。
<?php echo link_tag('css/style.css'); ?>

 - PHP CodeIgniter

  関連記事

CodeIgniter4で祝日一覧APIにCURLでリクエストし結果をファイルキャッシュする方法

Codeigniter4.4.4で祝日一覧APIにCURLでリクエストしたい。尚 ...

CodeIgniterのバージョンの調べ方

CodeIgniterを使っているシステムがあったが、どうも記憶しているディレク ...

CodeIgniter4 & reCAPTCHA でお問い合わせフォームを作成する方法

以前CodeIgniter4.4.4で簡易的なお問い合わせページを作成したが、今 ...

CodeIgniter4でフォームからファイルをアップロードし保存する方法

CodeIgniter4.4.4でformから画像等のファイルをアップロードし、 ...

Codeigniter4でMySQLに接続しCRUD操作する方法

Codeigniter4.4.4でMySQLに接続しCRUD操作したい。また、任 ...