My Vector Space

人生は寄り道してなんぼ

WordPressでブログ運営することのメリットとデメリット

f:id:ooigawa-bitter-sweet:20181025212111j:plain

WordPressは、CMS (コンテンツ・マネジメント・システム)というプラットフォームのシステムのことで、WEBサイトやブログの構築をすることのできるWEBサービスの1つです。

CMSとは、Content Management Systemの略で、日本語に訳すと「コンテンツ管理システム」です。その名の通りコンテンツを管理するシステムで、一般的にWEBサイトを運営・管理する上で必要とされている「HTMLやCSSのファイル編集 」「アップロード作業」「その他の付随する専門知識や技術」などのあらゆる作業を全てシステムが制御、管理してくれています。

つまり、CMSを使うことで、HTMLやCSSなどの専門知識がない初心者でも、管理画面からテキストを書いたり画像などを用意したりといった簡単な作業だけでWEBサイトやブログの構築ができるということです。

このようにCMSは汎用性の高い設計であることから、大規模な企業サイトや個人によるブログツールなど、世界中で様々な用途 目的を持つユーザーに利用されています。

この記事では、世の中にはびこる数あるCMSの中でも最も利用者数が多いとされているWordpressを使ってブログ運営をした場合の「メリット」「デメリット」についてを無料ブログとの比較を交えてまとめておきます。

メリット

世界レベルの標準でユーザー数が多く 無料で様々なテーマ テンプレートが配布されていて、足りない機能やパーツをプラグインで追加したり、自分でphpファイルや CSSファイルをカスタマイズしながらサイト構築ができる環境があるので あらゆる知識やノウハウが身につき、スキルアップに繋がる。

更新が簡単

ブログの更新作業のように簡単にできるので、HTMLやCSSの知識、技術がなくても大丈夫。
個人で行なうブログ運営はもちろん  頻繁に更新するような大規模なWEBサイトの構築など、あらゆる用途  目的を持つ利用者が対応できる設計になっている。

SEOに強い

FacebookTwitterへの自動投稿」「記事ごとのパーマリンク設定」「サイトマップの作成」等など、SEO対策に効果のある機能がたくさん備わっている。

商用利用が無料なのでコストパフォーマンスがいい

商用利用すると高いライセンス料がかかるCMSも多い中でWordpressは無料でできるものが多いため、日々の運用にかかる人件費などのコストが抑えられる。

広告を載せて収入を得ることができる

一般的なレンタルブログでは広告が表示されるがWordpressは一切表示されず 、また自分で自由に広告を掲載することで収入を得ることができる。

独自ドメインでブログを始められる

独自ドメインであるがゆえに、開設時はSEO的には検索エンジン経由の流入が少なく最初のスタートダッシュこそ弱いが、ブログでの収益化やマネタイズのための長期的な運用をしていくのであれば、自分の資産となる独自ドメインを持てるということは有利になる。

ブログの所有権を持てることを考えれば、開設の際のコストや初期集客の苦労などの手間は安い買い物といえる。

デメリット
サーバーを用意したり等の手間がかかるので、パソコンの初心者にはハードルが高い

無料で利用できるレンタルサーバー、もしくは「Ameba」「livedoor」「はてなブログ」等などを始めとした無料ブログであればサーバーのセットアップは不要だけど、WordPressの場合はサーバーなどサイトの立ち上げの準備から自分でしなければならない。

また無料ブログサービスの場合、セキュリティ対策  サーバーの管理等など、運用に関わるあらゆる事を会社側がやってくれるけど、WordPressはそれら全てを自分で管理していかないといけない。

「html / css」の最低限のスキルがないと、豊富に用意されている様々な機能を使いこなせない

ブログを更新したり 簡単なサイト構成であれば初心者でも作れるけど、オリジナルのデザインにカスタマイズしたり、豊富に用意されている様々な機能を使いこなすとなると、やはり html cssの最低限の知識 スキルがないと難しい。

拡張性に優れ 自由度が高い分、その恩恵を最大限受けるためにスキルを磨く必要があるということをメリットと捉えられる人がいる一方で、苦手な人にとってはデメリットとなる部分なのかも。 (開設の際の手間も含めて、自分でやらなければいけないことが多い、めんどくさい…という思い)

またテンプレートのカスタマイズ機能やプラグインなどのあらゆるサービス  情報のほとんどが英語表記なので、英語にある程度は慣れていないとスムーズに作業を進めることができない。

まとめ

長期的にみて、大規模なサイト運営を目指していくのであればワードプレスで始めるべきだと思います。
ただ、自由度が高くやりがいが大きい分 責任も大きくリスクもあるので、初心者であったりIT に精通していない人にとっては、ハードルやリスクの低い国内のメジャーな無料ブログサービスから始めた方がいいと思います。

 

 

関連記事ブログ運営に関する記事

プラグイン不要!!ページネーション設置方法

f:id:ooigawa-bitter-sweet:20181025201442j:plain  

僕はワードプレスを始めてまだ浅いですが、今の段階で すでにプラグイン同士のバッティングによる不具合と思われる現象が起きていて、ワードプレスの拡張性や自由度の高さを実感している一方で、同じように不安要素も尽きません。

プラグインにしても なるべく使わずに作業を進めていきたいと思っている今日この頃‥。

注意点

違うプラグイン同士が同じ関数を呼び出そうとする際に、エラーとなり画面が真っ白になるケースがあります。プラグイン設置の際は、あらかじめバックアップをとっておくことを忘れずに!!

ということで、ここでは「プラグインを使わずにページネーションを設置する方法」をまとめておきます。

 

【 完成画像 】

      pagenation     

手順としては、functions.phpで読み込んで index.phpで出力して CSSで調整していくという流れです。

この手順で以下のコードを記述していきます。

プラグイン不要!!のページネーション設置手順
「function.php」ファイルに記述

まずは「functions.php」に以下のコードを記述していきますが、その前に「functions.php」ファイルを編集する際の注意点から。

この「functions.php」ファイルは、関数ファイルが集約されていて 管理画面の表示やサイト表示をする際にも読み込まれるファイルで、特別なファイルという位置づけにあります。

カスタマイズしたりプラグインを追加する時は、この「functions.php」ファイルの編集をするプロセスを踏むことが多くなります。

編集の際は細心の注意が必要で、記述ミスが1文字でもあるとエラーメッセージが表示されて画面が真っ白になり、管理画面にもサイトにもアクセスできなくなってしまいます。

つまり データが消えてしまうということです。

そうなった場合、初期の段階であればデータ量も少ないので大きなダメージはないですが、内容量が多い状態のものであれば、その損失は計り知れません。

なので、「function.php」ファイルをいじる際は、念のためにバックアップを取っておいた方が安全です。

注意点

「function.php」ファイルをいじる際は、念のためにバックアップを取っておく。

こういった注意点を踏まえて、「functions.php」ファイルに以下のコードを記述していきます。

 【 functions.php 】
 1
  function pagination($pages = '', $range = 4)
 2
  {
 3
      $showitems = ($range * 2)+1;
 4
 
 5
      global $paged;
 6
      if(empty($paged)) $paged = 1;
 7
 
 8
      if($pages == '')
 9
      {
 10
          global $wp_query;
 11
          $pages = $wp_query->max_num_pages;
 12
          if(!$pages)
 13
          {
 14
              $pages = 1;
 15
          }
 16
       }
 17
 
 18
       if(1 != $pages)
 19
      {
 20
          echo "<div class=\"pagination clearfix\"><span>Page ".$paged." of ".$pages."</span>";
 21
        if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='"
 22
        .get_pagenum_link(1)."'>&laquo; First</a>";
 23
        if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)
 24
        ."'>&lsaquo; Previous</a>";
 25
 
 26
        for ($i=1; $i <= $pages; $i++)
 27
        {
 28
        if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) ||
 29
        $pages <= $showitems ))
 30
        {
 31
             echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='"
 32
            .get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
 33
            }
 34
        }
 35
 
 36
        if ($paged < $pages && $showitems < $pages) echo "<a href=\""
 37
        .get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";
 38
        if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages)
 39
        echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>";
 40
        echo "</div>\n";
 41
        }
 42
    }
 43
 
index.phpファイルに記述

次に、ページネーションを設置したい箇所に、出力するためのコードを記述。

ここでは、index.phpファイルの<div id=”content”>~</div>の閉めタグの直前に設置しました。

 【 index.php 】
 1
  <!-- ページネーションエリア -->
 2
  <?php if (function_exists("pagination")) {
 3
      pagination($additional_loop->max_num_pages);
 4
      } ?>
 5
  <!-- /ページネーションエリア   -->
デザインやレイアウトをCSSで調整していく

デザインはデフォルトのままになっているので、あとはCSSで調整していきます。

 【 style.css
 1
  /*ページネーションエリア*/
 2
  div.pagination {
 3
      clear:both;
 4
      position:relative;
 5
      font-size:11px;
 6
      line-height:13px ;
 7
      vertical-align: middle;
 8
      width:550px;
 9
      height:20px;
 10
      }
 11
 
 12
  div.pagination span, .pagination a {
 13
      display:block;
 14
      float:left ;
 15
      margin: 2px 2px 2px 0 ;
 16
      padding:6px 9px 5px 9px ;
 17
      text-decoration:none;
 18
      width:auto ;
 19
      background-color: #ffffff;
 20
      border:1px solid #E47273;
 21
      color:#E47273;
 22
      border-radius:3px
 23
    }
 24
 
 25
  div.pagination a:hover{
 26
      color:#fff ;
 27
      background-color:#E47273
 28
    }
 29
 
 30
  div.pagination .current{
 31
      padding:6px 9px 5px 9px ;
 32
      background-color:#E47273;
 33
      color:#fff
 34
      }
 35
 

参考サイト

http://sgwordpress.com/teaches/how-to-add-wordpress-pagination-without-a-plugin/

 

 

関連記事WordPressカスタマイズ関連の記事

サイドバー以外の場所にも複数のウィジェットを設置する方法

f:id:ooigawa-bitter-sweet:20150607161831j:plain
サイドバーというひとかたまりのエリアだけでなく、ヘッダー部分などページのあらゆる箇所ウィジェットの機能を複数設置する方法。
設置したいウィジェットの数だけ「 register_sidebar(); 」の設定を記述して有効化させる

まず、functions.phpファイルを開いて、register_sidebar();の設定を設置したいウィジェットの数だけ記述する。

1箇所に設定するのであれば1個設定し、2箇所に設定するのであれば以下の図のように2個設定する。

 【 functions.php 】
 1
  <?php
 2
  register_sidebar();
 3
  register_sidebar();
 4
  ?>

上記のように2つ記述して、管理画面から「ウィジェット」画面を開いて確認すると、「サイドバー1」「サイドバー2」という名前で二つのウィジェットエリアが作成されているので、あとは右側にドラッグしてメニューを有効化する。

無効化したい場合は、同じようにドラッグして戻せば無効化される。

f:id:ooigawa-bitter-sweet:20150603154210j:plain
有効化したウィジェットエリアを出力させる

上記までの操作で有効化するまでが完了しているので、次に実際に画面上に出力する設定をしていく。

複数の有効化されたウィジェットエリアがある場合、「サイドバー1」というウィジェットエリアを出力するには、テンプレートに<!?php dynamic_sidebar(1);?>と記述。

 【 index.php 】
 1
  <?php dynamic_sidebar(1);?>

「サイドバー2」というウィジェットエリアを出力するには、テンプレートに<!?php dynamic_   sidebar(2);?>と記述。

 【 index.php 】
 1
  <?php dynamic_sidebar(2);?>

 

 

関連記事WordPressカスタマイズ関連の記事

プラグインを使わずに、コードを追加するだけでパンくずリストを設定する方法

f:id:ooigawa-bitter-sweet:20150523101927j:plain

プラグインを使わずにコードを追加するだけで「パンくずリスト」を設定する方法をまとめておきます。

手順としては まず「functions.php」ファイルに記述する作業になるので その際の注意点から。

この「functions.php」ファイルは、関数ファイルが集約されていて 管理画面の表示やサイト表示をする際にも読み込まれるファイルで、特別なファイルという位置づけにあります。

カスタマイズしたりプラグインを追加する時は、この「functions.php」ファイルの編集をするプロセスを踏むことが多くなります。

編集の際は細心の注意が必要で、記述ミスが1文字でもあるとエラーメッセージが表示されて画面が真っ白になり、管理画面にもサイトにもアクセスできなくなってしまいます。

つまり データが消えてしまうということです。

そうなった場合、初期の段階であればデータ量も少ないので大きなダメージはないですが、内容量が多い状態のものであれば、その損失は計り知れません。

なので、「function.php」ファイルをいじる際は、念のためにバックアップを取っておいた方が安全です。

注意点

「function.php」ファイルをいじる際は、念のためにバックアップを取っておく。

こういった注意点を踏まえて、「functions.php」ファイルに以下のコードを記述していきます。

phpファイルは「 <?php 」 で始まり 「 ?> 」で終わるので、この間のどこかの箇所に入れる。

 【 functions.php 】
 1
  <?php
 2
  function breadcrumb($divOption = array("id" => "breadcrumb", "class" =>"clearfix")){
 3
      global $post;
 4
      $str ='';
 5
      if(!is_home()&&!is_admin()){ /* !is_admin は管理ページ以外という条件分岐 */
 6
          $tagAttribute = '';
 7
          foreach($divOption as $attrName => $attrValue){
 8
              $tagAttribute .= sprintf(' %s="%s"', $attrName, $attrValue);
 9
          }
 10
          $str.= '<div'. $tagAttribute .'>';
 11
          $str.= '<ul>';
 12
          $str.= '<li><a href="'. home_url() .'/">HOME</a></li>';
 13
          $str.= '<li>&gt;</li>';
 14
 
 15
          if(is_category()) {           //カテゴリーのアーカイブページ
 16
              $cat = get_queried_object();
 17
              if($cat -> parent != 0){
 18
                  $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
 19
                  foreach($ancestors as $ancestor){
 20
                      $str.='<li><a href="'. get_category_link($ancestor) .'">'. get_cat_name($ancestor)
 21
                      .'</a></li>';
 22
                      $str.='<li>&gt;</li>';
 23
                  }
 24
               }
 25
               $str.='<li>'. $cat -> name . '</li>';
 26
           } elseif(is_single()){           //ブログの個別記事ページ
 27
               $categories = get_the_category($post->ID);
 28
               $cat = $categories[0];
 29
               if($cat -> parent != 0){
 30
                   $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
 31
                   foreach($ancestors as $ancestor){
 32
                       $str.='<li><a href="'. get_category_link($ancestor).'">'. get_cat_name($ancestor)
 33
                       . '</a></li>';
 34
                       $str.='<li>&gt;</li>';
 35
                   }
 36
                }
 37
               $str.='<li><a href="'. get_category_link($cat -> term_id). '">'. $cat-> cat_name
 38
               . '</a></li>';
 39
               $str.='<li>&gt;</li>';
 40
               $str.= '<li>'. $post -> post_title .'</li>';
 41
           } elseif(is_page()){           //固定ページ
 42
               if($post -> post_parent != 0 ){
 43
                   $ancestors = array_reverse(get_post_ancestors( $post->ID ));
 44
                   foreach($ancestors as $ancestor){
 45
                       $str.='<li><a href="'. get_permalink($ancestor).'">'. get_the_title($ancestor) .'</a>
 46
                       </li>';
 47
                       $str.='<li>&gt;</li>';
 48
                   }
 49
               }
 50
               $str.= '<li>'. $post -> post_title .'</li>';
 51
           } elseif(is_date()){           //日付ベースのアーカイブページ
 52
               if(get_query_var('day') != 0){           //年別アーカイブ
 53
                   $str.='<li><a href="'. get_year_link(get_query_var('year')). '">' .
 54
                   get_query_var('year'). '年</a></li>';
 55
                   $str.='<li>&gt;</li>';
 56
                   $str.='<li><a href="'. get_month_link(get_query_var('year'), get_query_var
 57
                   ('monthnum')). '">'. get_query_var('monthnum') .'月</a></li>';
 58
                   $str.='<li>&gt;</li>';
 59
                   $str.='<li>'. get_query_var('day'). '日</li>';
 60
               } elseif(get_query_var('monthnum') != 0){           //月別アーカイブ
 61
                    $str.='<li><a href="'. get_year_link(get_query_var('year')) .'">'.
 62
                    get_query_var('year') .'年</a></li>';
 63
                    $str.='<li>&gt;</li>';
 64
                    $str.='<li>'. get_query_var('monthnum'). '月</li>';
 65
                } else {           //年別アーカイブ
 66
                    $str.='<li>'. get_query_var('year') .'年</li>';
 67
                }
 68
            } elseif(is_search()) {           //検索結果表示ページ
 69
                $str.='<li>「'. get_search_query() .'」で検索した結果</li>';
 70
            } elseif(is_author()){           //投稿者のアーカイブページ
 71
                $str .='<li>投稿者 : '. get_the_author_meta('display_name', get_query_var('author'))
 72
                 .'</li>';
 73
            } elseif(is_tag()){           //タグのアーカイブページ
 74
                $str.='<li>タグ : '. single_tag_title( '' , false ). '</li>';
 75
            } elseif(is_attachment()){          //添付ファイルページ
 76
                $str.= '<li>'. $post -> post_title .'</li>';
 77
            } elseif(is_404()){           //404 Not Found ページ
 78
                $str.='<li>404 Not found</li>';
 79
          } else{           //その他
 80
                $str.='<li>'. wp_title('', true) .'</li>';
 81
          }
 82
          $str.='</ul>';
 83
          $str.='</div>';
 84
      }
 85
      echo $str;
 86
  }
 87
  ?>
 88
 

次に呼び出しコードで呼び出します。
以下のコードを表示したいテンプレートに追加します。

 【 index.php 】
 1
  <?php breadcrumb(); ?>

以上です。
デザインやレイアウトはデフォルトのままなので、カスタマイズする場合はCSSで調整していけば完成。

参考サイトhttps://gist.github.com/wate/50a4186223f187128549

 

 

関連記事WordPressカスタマイズ関連の記事

Facebook,LINEなどのSNSボタンをプラグインを使って設置する方法

wordpress-9

「WP Social Bookmarking Light」は、ソーシャルメディアの共有ボタンを一元管理できるプラグインです。

ほとんどのソーシャルボタンに対応しています。

「WP Social Bookmarking Light」をインストールする

まず、Wordpress管理画面のプラグイン新規追加の画面を開き、 「WP Social Bookmarking Light」で検索する。

もしくは以下の本家サイトから直接ダウンロードしてインストールする。

https://wordpress.org/plugins/wp-social-bookmarking-light/

使いやすいように設定を変更する

管理画面から「WP Social Bookmarking Light」の設定変更画面を開き、使いやすいように設定を変更していきます。

ドラック&ドロップによる簡単な操作で、追加したいSNSボタンを選んだり、並び順を変えたりできるようになっています。

また設定項目の中にCSS編集画面が用意されていて、カスタマイズがしやすくなっているのもうれしいところ。

plug-in-1

設置できるソーシャルメディアは、以下のようにほとんどのものに対応しています。

 

 

関連記事WordPressカスタマイズ関連の記事

PAGE TOP