webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

wordpress theme "asteria lite" を使ったカスタマイズ作業の段取り

画像やリンクのパスをどのように指定するのがよいのか?

1月15日に考えたこと、、、

functions.phpに関数を追加する

  • 以下のコードをfunctions.phpに追加する。
  • 絶対パスの、「ホスト名」部分を省略して記述する段取り。

function delete_host_from_attachment_url($url) {  $regex = '/^http(s)?:\/\/[^\/\s]+(.*)$/';  if (preg_match($regex, $url, $m)) {    $url = $m[2];  }  return $url;}add_filter('wp_get_attachment_url', 'delete_host_from_attachment_url');add_filter('attachment_link', 'delete_host_from_attachment_url');

1月22日にあらためて考えたこと

  • phpを使って、絶対パスを読み込む方法。
  • <img src="<?php echo content_url(); ?>/themes/asteria-lite/images/######.jpg" alt=""  class="alignnone size-full wp-image-921" />のような指定方法。
  • あるいは、「theme」「asteria-lite」「images」に画像ファイルを置いて、相対パスで指定するか。
  • phpを使って絶対パスでリンクを指定する方法だと、backgroundをurlで指定するときにうまくいかない。
  • backgroundを使うこともあるだろうから、とりあえずは「images」フォルダーに画像ファイルを入れておこうと思う。

 

固定ページのテンプレートを作る

  1. 「page-」+「ページ内容が分かる名前」+「.php」つまり、page-#####.php、というファイルを作る。
  2. このファイルを、「wordpress」「wp-content」「themes」「asteria-lite」の直下に置く。
  3. 必要なページ分あらかじめ作っておく。

固定ページ用テンプレートのソースコード

  1. 冒頭は、wordpressに固定ページのテンプレートであることを宣言する記述が必要になる。(1-5行目)
  2. このテーマ(asteria-lite)のphpファイルには必ず「<?php global $asteria;?>」と記述されているので、それに準じる。
  3. ヘッダーを読み込む。

<?php
/*
Template Name: ##### page
*/
?>

<?php global $asteria;?>
<?php get_header(); ?>

 

 ダッシュボードで入力できる部分を作る

  1. この場合以下のソースコードを、入力した内容が表示されたい個所に記述する。
  2. このソースは、asteria-liteにあらかじめ用意されている「page-fullwidth」テンプレートからコピーしてきた。

制約事項

  • ダッシュボードから追加できる箇所は、1ページにつき一か所となる。
  • クラス名の命名規則は共同で開発する場合には規定しておいた方がいい。