勉強したことのメモ

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

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

   2024/01/30  PHP CodeIgniter

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

 

設置場所

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
RewriteEngine on
RewriteCond $1 !^(index\.php|images|.+\.css$|.+\.js$|.+\.png$|.+\.jpg$|robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]
RewriteEngine on RewriteCond $1 !^(index\.php|images|.+\.css$|.+\.js$|.+\.png$|.+\.jpg$|robots\.txt) RewriteRule ^(.*)$ /index.php/$1 [L]
RewriteEngine on
RewriteCond $1 !^(index\.php|images|.+\.css$|.+\.js$|.+\.png$|.+\.jpg$|robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]

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

 

読み込み方法

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/function.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css"> <script src="js/function.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/function.js"></script>

 

共通のパーツとして使う

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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という形で渡される。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
public function index()
{
$header['title'] = 'タイトル';
$this->load->view('header', $header);
$this->load->view('index');
}
public function index() { $header['title'] = 'タイトル'; $this->load->view('header', $header); $this->load->view('index'); }
public function index()
{
    $header['title'] = 'タイトル';
    $this->load->view('header', $header);
    $this->load->view('index');
}

 

その他

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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
#コントローラーの方で$this->load->helper('html');でヘルパーを読み込みしておく。
<?php echo link_tag('css/style.css'); ?>
#コントローラーの方で$this->load->helper('html');でヘルパーを読み込みしておく。 <?php echo link_tag('css/style.css'); ?>
#コントローラーの方で$this->load->helper('html');でヘルパーを読み込みしておく。
<?php echo link_tag('css/style.css'); ?>

 - PHP CodeIgniter

  関連記事

CodeIgniter4で特定のページにアクセスがあった際に301リダイレクトさせる方法

CodeIgniter4で特定のページにアクセスがあった際に301リダイレクトさ ...

CodeIgniter4でのメール送信方法(テキスト・HTMLメール)

CodeIgniter4.4.4でテキストメール及びHTMLメールを送信したい。 ...

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

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

CodeIgniter4で独自の404ページを表示する方法

CodeIgniter4にて存在しないページをブラウザから開くと、デフォルトの状 ...

DTIのVPSにCodeigniter3を導入する方法

DTIのVPSにPHPフレームワークのCodeigniter3系をインストールし ...

S