Dreamweaverでhtmlタグを綺麗にする設定(ソースコードのフォーマット)

イメージ
 Dreamweaverでhtmlを作成していると、プログラマーの人に渡した時に「タブスペースや改行がくずれる」という現象が起きる。 というのも、Dreamweaverでタグをエンター改行すると、インデント分の空白が勝手にタブで入ったりしてしまうのだ。 今まではその都度手作業でスペース入れたりしていたのだが、ちょっとdiv増やしたりするともうスペースの入れ直し!! …というのが一発で解消する方法を知ったので、設定を含めてメモ。 まずは上部メニューの「Dreamweaver」→「環境設定」を開く その中にある「コードフォーマット」で、上記設定をしておく。 ・インデント:☑を使用「2」「スペース」 ・タブサイズ:「2」☑スペースとして挿入 ・TDタグ:□TDタグ内に改行を含めない コード画面左側にある「ソースコードのフォーマット」をクリック その中にメニューとして「コードフォーマット設定」があるので、それを選ぶ。 タグごとに細かな設定ができるので、自分が一番見やすいように修正する。 自分の場合は「a」「div」「head」「button」を修正。 aタグの設定 改行:タグの前後 コンテンツ:フォーマットおよびびインデントあり divの設定 改行:前、中間、後 コンテンツ:フォーマットおよびびインデントあり buttonの設定 改行:前、中間、後 コンテンツ:フォーマットおよびインデントあり headの設定 改行:前、中間、後 コンテンツ:フォーマット及びインデントあり 最後に、「ソースフォーマットの適用」 ソース画面左の「ソースコードのフォーマット」アイコンを押して、「ソースフォーマットの適用」を選択すると、開いているソースの中身が整形されます。 ざっと見直して問題なければこれで完了!

カスタムフィールドにテキスト、画像URL(メディアアップローダー使用)して独自データベースに登録してその内容を取得する

①カスタムフィールドの中身を独自データベースへ登録する
②カスタムフィールド内で画像を登録する際にメディアアップローダーを使用する
・メディアアップローダーを使用して画像のURLを独自DBに登録する
・画像登録は2箇所作りたい
③独自データベースは2個作りたい
④登録したカスタムフィールドの中身を取得してコンテンツ内に表示する




①はこちらの記事で取り上げた中身になります。

②カスタムフィールド内で画像を登録する際にメディアアップローダーを使用する

https://gist.github.com/sushat4692/33df8a65474798fca0c6
こちらの記事の方法を参考に、①の際に作ったカスタムフィールド&新規DBのソースと混ぜ合わせる必要があります。

「admin-media.js」がメディアアップローダーを使用してくれる動きをしてくれる。
「admin.css」これは今回使いません
「function.php」この中でカスタムフィールドを作成している部分があるが、カスタムフィールドを作成するところは①のプラグインとして作成してしまっているので、ソースの一部を参考する形になります。

1.「function.php」で画像の登録・表示処理をしている部分を、①のプラグイン「custom-meta-field1.php」に追記します。

function.phpにある[36行目]〜[50行目]を、プラグイン側の画像登録を表示したい箇所にコピペします。

プラグイン側のtableのtd内にコピペです。
<td>
  <div class="custom-media" data-type="image" data-title="画像" data-target="#field-image">
    <input type="text" id="field-image" class="my-uploader__url widefat" name="street_img" value="<?php echo $street_img; ?>">
    <p>
      <a href="#" class="button button-primary custom-media-append">イラスト画像選択</a>
      <a href="#" class="button custom-media-delete">選択解除</a>
  </p>
   
<!-- カスタムフィールド名(field-image)+'-photo'というIDを指定します -->
  <div class="media-photo" id="field-image-photo">
   <?php if( $image_attach_id !== NULL ): ?>
   <img src="<?php echo esc_url( $image_file ); ?>" style="max-width: 150px; height: auto;">
            
  <?php else: ?>
    <?php if(!$street_img){ $street_img = 'http://****.jp/wp-content/uploads/2019/11/image.png'; } ?>
      <?php if($street_img): ?>
        <img class="my-uploader__image" src="<?php echo $street_img; ?>" style="width: 150px; height: auto;">
      <?php endif; ?>
    <?php endif; ?>
    </div>
  </div>
</td>

2.admin-media.jp

子テーマフォルダ内に新規フォルダを作成して配置
「wp-content」>「themes」>「***-child」>「my_admin_script」
1つのスクリプトで1つの画像アップロード機能として使用する。

このままだと画像登録した際に画像IDが登録されてしまうので、画像のURLを登録するようにする

[83] first.id ←first.url に変更

3.function.phpでjsを読み込む

//カスタムメタフィールドで画像アップロード
function my_admin_script() {
 wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/../basicstore-child/my_admin_script/admin-media.js' );
 wp_enqueue_script( 'my_admin_script2', get_template_directory_uri().'/../basicstore-child/my_admin_script/admin-media2.js' );

}
add_action('admin_head-post-new.php', 'my_admin_script');
add_action('admin_head-post.php', 'my_admin_script');
子テーマ「basicstore-child」の中にあるjsを2つ分読み込む

③ ②-1、②-2をもう一つ作る(独自データベースに登録する項目は2種類に分けたい)

1.custom-meta-field2.phpを作成し、以下を追加

プラグイン側のtableのtd内にコピペです。
<td>
  <div class="custom-media2" data-type="image" data-title="画像" data-target="#field-image">
    <input type="text" id="field-image" class="my-uploader__url widefat" name="street_img" value="<?php echo $street_img; ?>">
    <p>
      <a href="#" class="button button-primary custom-media-append2">イラスト画像選択</a>
      <a href="#" class="button custom-media-delete2">選択解除</a>
  </p>
   
<!-- カスタムフィールド名(field-image)+'-photo'というIDを指定します -->
  <div class="media-photo" id="field-image-photo">
   <?php if( $image_attach_id !== NULL ): ?>
   <img src="<?php echo esc_url( $image_file ); ?>" style="max-width: 150px; height: auto;">
            
  <?php else: ?>
    <?php if(!$street_img){ $street_img = 'http://****.jp/wp-content/uploads/2019/11/image.png'; } ?>
      <?php if($street_img): ?>
        <img class="my-uploader__image" src="<?php echo $street_img; ?>" style="width: 150px; height: auto;">
      <?php endif; ?>
    <?php endif; ?>
    </div>
  </div>
</td>
最初のdivのclassを「custom-media2」に。
イラスト画像選択ボタンのclassを「custom-media-append2」に。
選択介助ボタンのclassを「custom-media-delete2」に。
[17行目]データベース作成時の名前を「ex_***」と別名に。
[27行目]バージョンを1.0から1.1等、バージョンを変える。

2.admin-media2.jpを作成

本当はもっといいやり方があるのかもしれないが、2つ目はjs内のclass名を変えてjsを2つ用意。
[9] custom-media2 ←2を追加
[17] CustomMediaWindow2 ←2を追加
[19] .custom-media-append2 ←2を追加
[20] .custom-media-delete2 ←2を追加
[35] click.customMedia2 ←2を追加
[39] click.customMedia2 ←2を追加
[149] new CustomMediaWindow2 ←2を追加

④登録したカスタムフィールドの中身を取得してコンテンツ内に表示する


page.php等、カスタムフィールドを表示したい場所で以下の記述をする
//DBの中身を取得
     global $wpdb;
     $get_meta = $wpdb->get_row( "SELECT * FROM " .wp_ex_street. " WHERE post_id =". $post_id ,ARRAY_A);

$street_img = $get_meta['street_img'];
後は表示したい場所で echo $street_img すればOK。

ソース内にDB接続を直接書いてしまっているが、参考元にはちゃんと別で呼び出す方法が載ってます。

コメント

このブログの人気の投稿

Dreamweaver(ドリームウィーバー)でコピーができない。ペーストができない。

wordpressのtwentyseventeenのヘッダー画像サイズを統一する

habakiri 固定ページ・個別(投稿)ページ・その他ページのヘッダー画像にアイキャッチ画像を使用