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

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

wordpressの自作パンくずリストbootstrap3に対応 カテゴリー・タグ・固定ページの親も表示

プラグインを使わずに、自作のパンくずリストを表示させます。
投稿ではカテゴリーの親、タグの親。固定ページでは固定ページの親も表示させます。
そして見た目はbootstrapのスタイルを使用します。

できれば子テーマの
■function.php
/* パンくずリスト */
function mytheme_breadcrumb() {
 //HOME>と表示
 echo '<ol class="breadcrumb">';
 echo '<li><a href="'.get_bloginfo('url').'" >HOME</a></li>';
 
 //投稿記事ページとカテゴリーページでの、カテゴリーの階層を表示
 $cats = '';
 $cat_id = '';
 if ( is_single() ) {
  $cats = get_the_category();
  if( isset($cats[0]->term_id) ) $cat_id = $cats[0]->term_id;
 }
 else if ( is_category() ) {
  $cats = get_queried_object();
  $cat_id = $cats->parent;
 }
 $cat_list = array();
 while ($cat_id != 0){
  $cat = get_category( $cat_id );
  $cat_link = get_category_link( $cat_id );
  array_unshift( $cat_list, '<a href="'.$cat_link.'">'.$cat->name.'</a>' );
  $cat_id = $cat->parent;
 }
 foreach($cat_list as $value){
  echo '<li>'.$value.'</li>';
 }
 
 //固定ページの親を表示
 if(get_post_type()=="page"){
  $page_id =$wp_obj->ID;
  $page_title = apply_filters('the_title', $wp_obj->post_title);
  
  //親ページがあれば順番に表示
  if ( $wp_obj->post_parent !== 0 ) {
   $parent_array = array_reverse( get_post_ancestors( $page_id ) );
   foreach( $parent_array as $parent_id ) {
    $parent_link = esc_url( get_permalink( $parent_id ) );
    $parent_name = esc_html( get_the_title( $parent_id ) );
    echo '<li>'.
                '<a href="'. $parent_link .'">'.
                   $parent_name .
                '</a>'.
              '</li>';
   }

    }
 }
 
 
 //現在のページ名を表示
 if ( is_singular() ) {
  if ( is_attachment() ) {
   previous_post_link( '<li>%link</li>' );
   echo $sep;
  }
  the_title( '<li>', '</li>' );
 }
 else if( is_archive() ) the_archive_title( '<li>', '</li>' );
 else if( is_search() ) echo '<li>検索 : '.get_search_query().'</li>';
 else if( is_404() ) echo '<li>ページが見つかりません</li>';
 
 echo '</ol>';
}
ここまで

■実際に表示したいページ
<!--パンくずリスト-->
<?php if( !is_front_page() && !is_home() ): ?>
<?php mytheme_breadcrumb(); ?>
<?php endif; ?>

コメント

このブログの人気の投稿

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

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

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