【WordPress】WordPressテーマ変更

WordPressを入れ直したので、外観-テーマをTwenty Seventeenに変更しました。
それに伴い、デザインをカスタマイズしています。

  • アーカイブを変更
    トップページが全文表示から抜粋表示に変更となります。
    archive.php

    get_template_part( 'template-parts/post/content', get_post_format() );
    ↓
    get_template_part( 'template-parts/post/content', 'excerpt' );
    
  • 「投稿」文字を削除
    記事の上にある「投稿」の文字を削除します。
    index.php

    以下を削除
    <header class="page-header">
      <h2 class="page-title"><?php _e( 'Posts', 'twentyseventeen' ); ?></h2>
    </header>
    
  • 「カテゴリ」文字を削除
    記事の上にある「カテゴリ」の文字を削除します。
    archive.php

    以下を削除
    <?php if ( have_posts() ) : ?>
      <header class="page-header">
        <?php
          the_archive_title( '<h1 class="page-title">', '</h1>' );
          the_archive_description( '<div class="taxonomy-description">', '</div>' );
         ?>
      </header><!-- .page-header -->
    <?php endif; ?>
    
  • パンくずリストの追加(未実施)
    fanction.php

    以下を一番下に追加
    function breadcrumb(){
      global $post;$str ='';
      if(!is_home()&&!is_admin()){
        $str.= '<div id="breadcrumb" class="cf"><div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display:table-cell;">';
        $str.= '<a href="'. home_url() .'" itemprop="url"><span itemprop="title">ホーム</span></a> &gt;&#160;</div>';
        if(is_category()) {
          $cat = get_queried_object();
          if($cat -> parent != 0){
            $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
            foreach($ancestors as $ancestor){
              $str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display:table-cell;"><a href="'. get_category_link($ancestor) .'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor) .'</span></a> &gt;&#160;</div>';
              }
            }
           $str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display:table-cell;"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a> &gt;&#160;</div>';
        }elseif(is_page()){
          if($post -> post_parent != 0 ){
            $ancestors = array_reverse(get_post_ancestors( $post->ID ));
            foreach($ancestors as $ancestor){
              $str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display:table-cell;"><a href="'. get_permalink($ancestor).'" itemprop="url"><span itemprop="title">'. get_the_title($ancestor) .'</span></a> &gt;&#160;</div>';
            }
          }
        }elseif(is_single()){
          $categories = get_the_category($post->ID);
          $cat = $categories[0];
          if($cat -> parent != 0){
            $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
            foreach($ancestors as $ancestor){
              $str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display:table-cell;"><a href="'. get_category_link($ancestor).'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor). '</span></a>→</div>';
            }
          }
          $str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display:table-cell;"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a> &gt;&#160;</div>';
        }else{
          $str.='<div>'. wp_title('', false) .'</div>';
        }
        $str.='</div>';
      }
      echo $str;
    }
    
    以下をパンくずリストを表示したいphp(page.phpやsingle.phpなど)に追加
    <?php breadcrumb(); ?>
    

【WordPress】WordPressSSL導入

  • WordPressSSL導入

    vi /var/www/z-blog/wp-config.php
    
    # 下記内容を「編集が必要なのはここまで(略)」より上に追加
    /* ログイン・管理画面SSL強制 */
    define('FORCE_SSL_LOGIN', true);
    define('FORCE_SSL_ADMIN', true);
    

    自身でURLをhttpsに変更すればログインはできましたが、
    上記を設定しただけではログイン画面を表示しても強制的にhttpsに切り替わりませんでした。
    そこで「.htaccess」にリダイレクトを記載してみます。

    vi /var/www/z-blog/.htaccess
    
    # BEGIN WordPressの上に下記内容を追加
    RewriteCond %{THE_REQUEST} ^[A-Z]{3,9} /(.*) HTTP/ [NC]
    RewriteCond %{HTTPS} !=on [NC]
    RewriteRule ^/?(wp-admin/|wp-login.php) https://z-area.net%{REQUEST_URI}%{QUERY_STRING} [R=301,QSA,L]
    

    設定後にログイン画面を表示したら、強制的にhttpsに切り替わりました。
    不思議なのは「.htaccess」の内容を消しても強制的にhttpsに切り替わり続けるようになったこと。
    不都合ないので気にしないことにしました。

【WordPress】WordPress設定

Raspberry Piはいつ壊れるか不安なので、
再インストールを見越してWordPressの設定メモ。

  • 外観-テーマ
    Paramentを入れました。
  • 外観-ウィジェット
    最近のコメントと最近の投稿を使用停止。
  • 外観-テーマ編集
    style.cssの編集で最終行に下記内容を追加

    .form-allowed-tags {
    	display:none !important;
    }
    
  • プラグイン-インストール済のプラグイン
    TablePressを導入。
    TablePressのプラグインのオプションでテーマにあうようにカスタムCSSを設定。

    .tablepress thead th {
    	font-size: 10pt !important;
    	color: #989eae !important;
    	text-align: center !important;
    	background-color: #202228 !important;
    	padding: 5px !important;
    	border-width: 1px !important;
    	border-style: solid !important;
    	border-color: #444855 !important;
    }
    
    .tablepress tbody td {
    	font-size: 10pt !important;
    	color: #989eae !important;
    	text-align: left !important;
    	background-color: #202228 !important;
    	padding: 5px !important;
    	border-width: 1px !important;
    	border-style: solid !important;
    	border-color: #444855 !important;
    }
    
  • プラグイン-インストール済のプラグイン
    SyntaxHighlighter Evolvedを導入。
    SyntaxHighlighterのバージョンは2.xを選択。
    テーマはEmacsを選択。
  • ユーザー-あなたのプロフィール
    「ビジュアルリッチエディターを使用しない」にチェック。
  • 設定-一般設定
    新規ユーザーのデフォルト権限グループを「投稿者」に設定。
    日付のフォーマットを「YYYY/MM/DD」に設定。
    時刻フォーマットを「HH24:MI」に設定。
  • 設定-表示設定
    1ページに表示する最大投稿数を「5」に設定。
    RSS/Atom フィードで表示する最新の投稿数を「5」に設定。
  • 設定-ディスカッション
    投稿のデフォルト設定のチェックを全て外す。
    自分宛のメール通知のチェックを全て外す。
  • 設定-パーマリンク設定
    日付と投稿名を選択。
    カスタム構造で「/%year%/%monthnum%/%day%/」を設定したところ、
    この内容では記事が一意に特定できないため、プレビュー機能が利用できませんでした。
    1日に何回も記事投稿しないから全く気付かず、だいぶ迷走しました。

    パーマリンク設定を行うと自動で「.htaccess」が作成され、
    中身を見てみると「mod_rewrite.c」というモジュールが呼ばれいるので、
    モジュールを有効化します。

    # モジュール有効
    a2enmod rewrite
    service apache2 restart
    

    既に有効になっている場合は「Module rewrite already enabled」と表示されます。

【WordPress】WordPress導入

WorldPressを初期ディレクトリ(wordpress)以外に
リビジョン機能を無効にした状態でインストールします。

  • WordPress導入

    cd /var/www
    wget http://ja.wordpress.org/latest-ja.zip
    unzip latest-ja.zip
    # wordpressというディレクトリで展開されますが、気分で変更
    mv wordpress/ 任意ディレクトリ名
    # ディレクトリに権限付与
    chown -R www-data.www-data 任意ディレクトリ名/
    cd 任意ディレクトリ名
    # wp-config.phpをサンプルからコピーして作成
    cp -pi wp-config-sample.php wp-config.php
    vi wp-config.php
    
    # 下記内容を変更
    define('DB_NAME', 'database_name_here');
    ↓
    define('DB_NAME', 'DB名');
    
    define('DB_USER', 'username_here');
    ↓
    define('DB_USER', 'DBユーザ名');
    
    define('DB_PASSWORD', 'password_here');
    ↓
    define('DB_PASSWORD', 'DBパス');
    
    # 下記内容を「編集が必要なのはここまで(略)」より上に追加
    /* リビジョン無効 */
    define('WP_POST_REVISIONS', false);
    

下記URLにアクセスする。
http://z-area.net/任意ディレクトリ名/wp-admin/install.php

初期設定後にログインすると記事を投稿できるようになります。
初期設定画面が出てこない場合、下記設定を一時的に変更する。

vi /etc/apache2/sites-available/default
# 下記内容を変更(「/var/www/」の子要素)
Options -Indexes FollowSymLinks -MultiViews
↓
Options Indexes FollowSymLinks -MultiViews
service apache2 restart

WordPress導入後は設定を元に戻しておきます。