WordPress

アフリエイトブログの作成と運営を考える

WordPRessに商品データをインポートする「第7回」

スポンサーリンク

「Really Simple CSV Importer」プラグインを使う

「Plus Drop Shipping」にて書き出された商品のCSVデータ。

f:id:yumeji773:20190801141207j:plain

 

ds-01_20161012_212655_531-publish CSVファイルを使ってみます。

これはファイル名を見ていただくとわかりますが一回の書き出し毎にファイル名が変更されしてフォルダに保存されていきます。

ds-01_20161012_212655_531-publish

ds-01用のファイルを2016年10月12日 21時26分55秒に531点の商品データを作成して投稿のステータスがpublish(公開)になっています。

このCSVファイルをWordPressにインポートするとすぐに公開されるわけです。

Really Simple CSV Importerプラグインを使う

ダッシュボード >> ツール インポート を開きます。

f:id:yumeji773:20190801141957j:plain

その中から使用するのは ”CSV” のインポーターの実行を選択

f:id:yumeji773:20190801142117j:plain

ファイルを選択します。

f:id:yumeji773:20190801142304j:plain

f:id:yumeji773:20190801142437j:plain

ファイルの間違いがなかったら”ファイルをアップロードしてインポート”を選択します。

インポート完了するまで画面の変化はありません。インポート完了するまで待ちます。

処理が完了すると

処理の状況が表示されます。

f:id:yumeji773:20190801142656j:plain

f:id:yumeji773:20190801142740j:plain

サイトで確認してみましょう

サイトにも公開されています。後ほどCSSとか弄って見え方を変更します。

登録は無事に完了している。

 

f:id:yumeji773:20190801143044j:plain

 

ダッシュボード >> 投稿一覧 でも確認

f:id:yumeji773:20190801143154j:plain

531件すべて確認できます。

f:id:yumeji773:20190801143257j:plain

記事の編集からカスタムフィールドを見る

f:id:yumeji773:20190801143406j:plain

スタイルCSS

/************************************
** カートに入れるボタン
************************************/
.cart {
display: inline-block;
width: 200px;
height: 54px;
text-align: center;
text-decoration: none;
line-height: 54px;
outline: none;
background-color: #cc0033;
color: #fff;
}
.cart::before,
.cart::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}
.cart,
.cart::before,
.cart::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}

.cart:hover {
background-color: #59b1eb;
}

/************************************
** キャッチコピー
************************************/
.catch {
color: transparent;
background-color : black;
text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
-webkit-background-clip : text;
}


/************************************
** フォントを灰色にする
************************************/
body{
 color:#555555 !important;
}


/************************************
** 見出し(H1-6)
************************************/
h1, h2, h3, h4, h5, h6{
line-height:130%;
color:#333;
}

.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6{
position:relative;
margin-top:35px;
margin-bottom:20px;
}
.article h1{
padding: 1em;
border: 3px solid #ccc;
border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
}

#archive-title {
padding: 1em;
border: 3px solid #ccc;
border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
}

.article h2 {
padding: .5em .75em;
background: -webkit-linear-gradient(top, #6d98bf 0%, #4885bf 100%);
background: linear-gradient(to bottom, #6d98bf 0%, #4885bf 100%);
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}

.article h3{
position: relative;
padding: .5em .75em;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 6px;
}
.article h3::before,
.article h3::after {
position: absolute;
top: 100%;
left: 30px;
content: '';
height: 0;
width: 0;
border: 10px solid transparent;
}
.article h3::before {
border-top: 15px solid #ccc;
}
.article h3::after {
margin-top: -2px;
border-top: 15px solid #fff;
}

.article h4{
padding-bottom: .5em;
border-bottom: 3px double #ccc;
}

.article h5 {
padding-bottom: .5em;
border-bottom: 1px solid #ccc;
}
.article h6{
font-size:14px;
padding:8px 0;
}

.entry-content{
margin-bottom: 60px;
}

/************************************
** ウィジット見出し(H1-6)
************************************/

#sidebar h3{
padding: .5em .75em;
background: -webkit-linear-gradient(top, #ffffff 0%, #d8d8d8 100%);
background: linear-gradient(to bottom, #ffffff 0%, #d8d8d8 100%);
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}

/* リストタグを修正 */
.article li {
margin: 0 0 7px;
line-height: 1.7;
position: relative;
padding-left: 10px;
}


/************************************
** リストタグを修正
************************************/
.article li {
margin: 0 0 7px;
line-height: 1.7;
position: relative;
padding-left: 10px;
}

/************************************
** 記事を読むボタンの装飾
************************************/
#breadcrumb span.sp {
display:none;
}

#breadcrumb div[itemtype="http://data-vocabulary.org/Breadcrumb"] {
background: #F3F3F3;
padding: 4px;
position:relative;
margin-right:20px;
}

#breadcrumb div[itemtype="http://data-vocabulary.org/Breadcrumb"] a:after,
#breadcrumb div[itemtype="http://data-vocabulary.org/Breadcrumb"] a:before
{
content:'';
position:absolute;
top: 0;
bottom: 0;
width: 1em;
background: #F3F3F3;
transform: skew(-10deg);
}


#breadcrumb div[itemtype="http://data-vocabulary.org/Breadcrumb"] a:before{
left: -.6em;
border-radius: 5px 0 0 5px;
}
#breadcrumb div[itemtype="http://data-vocabulary.org/Breadcrumb"] a:after{
right: -.6em;
border-radius: 0 5px 5px 0;
}

#breadcrumb a {
color: #4D4D4D;
font-weight:700;
}

#breadcrumb {
color: #4D4D4D;
}

/************************************
** 記事間に線を引く
************************************/
#main .entry {
border-bottom: 1px solid #F0F0F0;
padding-bottom: 15px;
}

/************************************
** サムネイル画像にエフェクト
************************************/
.entry-thumb,.wpp-thumbnail{
overflow: hidden;
}
.entry-thumb img,.wpp-thumbnail img{
transition: 0.6s ;
}

.entry-thumb img:hover,.wpp-thumbnail:hover {
opacity: 0.6;
-moz-transform: scale(1.1,1.1);
-webkit-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
}