ホームページをリニューアルしました。旧HPはこちら
wordpress 歳時記 ソフト・ハードウェア

ホームページリニューアル　備忘録その１（1/28）

現在のホームページは2015年に作成したものだが、この間のウェブ・IT技術の進歩は著しく、モバイルデバイスで閲覧するにはレスポンシブ対応のホームページが必須になってきた。そこで重い腰をあげてホームページをRenewalすることにした。
作成にあたっては前回と同様、Wordpressが提供するテーマを使って作ろうと思ったが、ちょっとおしゃれなHPを作ろうとすると、CSSやJavascriptを駆使したカスタマイズが必要である。しかしいずれの言語も使いこなすだけの十分な知識がないので、ネットで評判の良い「Cocoon」というテーマテンプレートを使って、これをカスタマイズすることにした。以下、主なカスタマイズ内容を備忘録としてまとめておく。

作成にあたっては下記の点に留意した。
・スマホでも見やすいデザインにする。とくに眼鏡なしでもなんとか読めるようにする。
・Wordpressのエディターに直にPHPコードを書かない。Function.phpなどでショートコードを設定し、サイトの安全性を確保する。
・カスタマイズはできるだけプラグインに頼らない。

前準備　旧サイトの投稿データを新サイトに移行する

＜方法＞

①旧HPにおいて、プラグインWP CSV Expoterを使って、投稿データをCSVファイルに落とす。

export項目：

post-id
Post-type
slug
post-title
post-content
thumbnail
publish
post-date
custome-field

sort by dates DESC
character code UTF-8

②CSVファイルをLibreOfficeで読み込み、再度CSV形式で上書きする。
③新HPのダッシュボードにおいて、プラグインReally Simple CSV importerを使ってCSVファイルを読みこむ。

注意点：
exporファイルを、誤って2度読み込み等すると、投稿画像がMySQLのデータベースのidを消費して、
「csvファイルからの投稿タイプ値は、データベース内の既存データと一致しません」
「post_id: 7997、post_type(csv): post、post_type(db): attachment」
というエラーが発生した。
このエラーは、WPの//wp-content/uploads内のすべての画像データを消去し、再度読むことで解消した。

 

トップページ（フロントページ）のカスタマイズ

ヘッダー部

・ホームページのロゴ（HomeAtmo）のサイズ変更
・ヘッダーのPageNaviの文字フォント、色、Paddingなどを変更

Body部

１、最近の投稿記事が見られようにカルーセルを設置

カルーセルやアピールエリアなどの位置は、cocoon-master/tmp/body-top.phpのテンプレートで決められており、子テーマからこちらのテンプレートを上書きすることで、表示される位置を変更することができる。

＜修正内容＞
①サーバ上のcocoon-master/tmp/carousel.phpを子テーマにtmpフォルダーを作り同じ名前のまま保存。
②サーバ上のcocoon-master/tmp/body-top.phpを子テーマにtmpフォルダーを作り同じ名前のまま保存。

⇒./wp-content/themes/cocoon-child-master/tmp
└body-top.php
└carousel.php

③子テーマのcarousel.php、body-top.phpを以下のように変更

・body-top.php　２３－２４行目の

<?php //カルーセル
get_template_part('tmp/carousel'); ?>

を、ファイルの最後に移動する。

<div id="content-in" class="content-in wrap">
<main id="main" class="main<?php echo get_additional_main_classes(); ?>" itemscope itemtype="https://schema.org/Blog">
<?php //カルーセル
get_template_part('tmp/carousel'); ?>

④carousel.phpに下記の記述を追加（最近の投稿記事のタイトル追加）
・fontawsomeを使ったアンダーライン付きのタイトル、スタイルは.topicsというCSSで規定

if( $query -> have_posts() ): //カルーセルが設定されているとき
?>
<?php
echo '<div class="far fa-list-alt topics">';
echo '<b> 最近の投稿記事</b>';
echo '</div>';
?>
<div id="carousel" class="carousel<?php echo get_additional_carousel_area_classes(); ?>">
/* Cocoon-master-child sytle.cssに.topicsというCSSを追加 */

.topics {
font-size: 18px;
color: #194B8B;
text-decoration: none;
border-bottom: 3px solid #ccc;
padding-bottom: 8px;
}

２、カルーセルをおしゃれにカスタマイズするCSSをmaster-childのstyle.cssに追記

参考URL:https://nagi-channel.com/cocoon-slider-customize/#toc1

#carousel .carousel-in{
  box-shadow:none;
  background-color:#f7f7f7;
}
#carousel .a-wrap{
  margin:0;
  box-shadow:none;
  border:none;
}
#carousel .carousel-entry-card-title{
  font-size:0.75em;
  font-weight:bold;
  color:#333;
}

/** カルーセル前の「最近の投稿」タイトルの修飾 **/
.topics {
  font-size: 20px;
  //color: #194B8B;
  color: #6f6f6f;
  text-decoration: none;
  border-bottom: 3px solid #ccc;
  padding-bottom: 8px;
}

/**マウスオーバーでカルーセルのカードを背景色を変える**/
.carousel-entry-card-wrap:hover {
  background-color: #ccc;
}

/*カルーセルカードのタイトルにマウスオーバー時に下線を入れる*/
.carousel-entry-card-title:hover {
  text-decoration: underline; /*下線*/
  color: #000092; /*文字色*/
}

３、フロントページのスタイル変更をHOME固定ページのカスタムCSSに追記

・フロントページの投稿日・更新日を消す
・フロントページのタイトル余白の削除
・フロントページのタイトル(Home)の削除
・固定ページの投稿日・更新日を消す・
・h5の高さ、アンダーライン太さなどの変更
・フロントページの下にshortcode-ultimate post機能を使って、最近の投稿記事抜粋を設置
それに伴いshortcode-ultimate post機能のBlogタイトル文字サイズを変更。
shortcode-ultimateのCSS欄に、コメントの非公開CSSを追加

４、気象データの一覧表作成
・旧HPのエディターにPHPコードを書いていたが、これをPHPファイルに落として、Function.phpで読み込むように変更。
・飯田の気象：iida-now1.php
・富士見の気象：fujimi-now1.php
・これらのphpファイルをショートコードで読み込めるように、Function.phpに以下のコードを追記

/* ショートコードを使ったphpファイルの呼び出し方法　2020/02/15　追記
 参考　https://bge.jp/wp-shortcode-php_include/
 my-php-Includeという関数を「myphp file='***'」というShortCodeで呼ぶ
 用例：myphp file='my-template' を [] で括る。（使用PHPファイル＝'my-template'） */

function my_php_Include($params = array()) {
extract(shortcode_atts(array('file' => 'default'), $params));
ob_start();
//include(STYLESHEETPATH . "/$file.php"); // phpファイルのDirectoryパス
include("/home/miyasan/www/well/wp-content/themes/cocoon-child-master/"."$file.php");
return ob_get_clean();
}
add_shortcode('myphp', 'my_php_Include');

５、フロントページにTwitterの埋め込みBoxを設置
・非公開のTwitterをHPに載せるため、access tokenが使えるプラグイン「Twitter Feeds」を使用。
・Twitter Feedsのショートコードを下記のCSSで修飾

/* --- Twitter埋め込み枠 スクロールBOX設定 --- */
.twitter-box{
  height:25.8em;
  overflow:auto;
  // background-color: #fffcfc;
  background-color: #fffafa;
  width: 90%;
  margin: auto;
  //border-top: 4px solid #08873A;
  //border-bottom: 4px solid #08873A;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, .4);
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -webkit-overflow-scrolling: touch;
}

サイドバーのカスタマイズ

以下の内容にカスタマイズするCSSをmaster-childのstyle.cssに追記

・サイドバーのカレンダ幅調整,文字,修飾変更
・カテゴリーに下線(点線）を入れる
・サイドバーカテゴリにFontAwesomeの修飾付加
・サイドバーカテゴリ、記事行間調整
・サイドバー新着記事フォント変更

モバイルスライドメニュー（ヘッダー部のスライドメニュー）

メニューをカスタマイズするCSSをmaster-childのstyle.cssに追記

・スマホメニューの行間を狭くする、下線（点線）を入れる
・モバイルメニューの行間、背景色変更
・モバイル時のヘッダーロゴを非表示
・モバイルヘッダーメニューエリアのカスタマイズ
・メニュータイトルの前にFontAwesomeで矢印の修飾・Wordpressの「外観－メニュー」にて、新たにモバイルスライドメニューを作成する。
＜作成方法＞
メニュー項目のナビゲーションラベルに、下記のよなFontAwesomeのHTMLを記述し、矢印マークを追加

<i class="fas fa-arrow-alt-circle-right"></i> Home

サイト記事一覧　固定ページの作成

旧HPのエディターにPHPコードを書いていたが、これをPHPファイルにして、Function.phpで読み込むようする。プログラムは/wp-content/themes/cocoon-child-masterに保存する。（プログラム名：site-article-list.php）

<?php
global $post;
$tmp_post = $post;
$category_ids = array( '3'); //カテゴリーIDを指定
$numberposts = '-1'; //一覧表示したい記事数を数字で指定
foreach ( $category_ids as $category_id ) {
?>
<h3><?php echo get_cat_name( $category_id ); ?></h3>
<ul>
<?php
$postslist = get_posts( "category=$category_id&numberposts=$numberposts&order=DESC&orderby=date" );
foreach ( $postslist as $post ) {
?>
<li> <?php the_date_xml(); ?>  <a href=<?php echo get_permalink( $post->ID ); ?>><?php echo $post->post_title; ?></a></li>
<?php
}
?>
</ul>
<?php
}
$post = $tmp_post;
?>

 

 

 

 

コメント

タイトルとURLをコピーしました