WordPress: Membuat Child Themes

Terakhir diperbaharui: Sabtu, 09 September 2017 pukul 08:48
Tautan: http://darto.id/7h

Apa itu Child Themes?

Kalau ada istilah child themes pasti akan ada pula istilah parent themes. Parent themes adalah tema (themes) yang akan kita gunakan untuk CMS WordPress kita. Seperti artinya, child themes adalah keturunan dari parent themes (tema utama).

Fungsi Child Themes

Fungsi yang terutama dari child themes adalah mengambil semua peran atau konfigurasi dari tema utama (parent themes) dan kemudian kita menambahkan atau menghilangkan konfigurasi tersebut pada child themes yang akan kita terapkan untuk tampilan di backend (dasbor) dan halaman website.

Mengapa Harus Membuat Child Themes? !!!

Tema di WordPress adalah sebuah kewajiban yang harus ada. Sebelum era ada child themes, ketika kita ingin menambahkan atau menghilangkan konfigurasi di WordPress, kita menulis kodenya di functions.php yang berada di dalam folder tema. Tetapi, bagi yang pelupa tentunya akan jadi masalah besar, karena kita sudah menulis kode yang kita inginkan dan kemudian ada update tema dari developer. Bles…. hilang semua deh. Terkadang dan seringnya lupa backup juga, jadinya total disaster dah, hehehe.

Sejauh mana peran penting child themes? Saya coba uraikan beberapa hal saja, bagi yang ingin menambahkan silakan.

  • Tidak merubah parent theme. Dengan membuat child theme, semua kustomisasi yang kita buat tidak akan berpengaruh pada parent theme.
  • Aman melakukan update tema. Karena kita tidak utak-atik atau menyentuh file-file yang berada di tema utama, artinya kita akan aman ketika melakukan update yang disediakan oleh pengembang tema yang sudah kita beli.
  • Memiliki konfigurasi yang sama dengan tema utama. Lantas, kenapa tetap harus membuat child theme jika konfigurasinya sama? Kalau menurut saya sih itu keuntungannya, hehehe. Karena untuk menjawab hal ini harus balik lagi 2 poin di atas. Dan tentunya, siapa juga sih yang tidak ingin merubah dari tampilan untuk website kita? entah menambahkan style (css) atau script (javascript), pastinya setiap website ada penyesuaian terhadap apa yang kita mau.
  • Mengurangi penggunaan plugins. Poin ini hanya kecendrungan saya saja dalam menggunakan CMS WordPress, yaitu mengurangi penggunaan plugins yang bisa berdampak terhadap performa website. Ada beberapa web admin, untuk melakukan kustomisasi dari tema yang dibeli dengan keinginan tampilan, banyak menginstall plugins. Yang menurut hemat saya tentunya banyak sekali kelemahannya karena biasanya pengembang atau pembuat plugins, sebetulnya saya gak cocok nyebut pengembang hehehe, emangnya bikin kue bolu, pengembang. Tapi berhubung orang Indonesia sudah di colok hidungnya sama Google translate, taunya pengembang bukan developer, hehehe. Lanjut… banyak pengembang yang membuat plugins berawal dari tujuan pribadinya sehingga tentunya saat membuat plugins bukan untuk melengkapi plugins lainnya. Dan artinya jika kita banyak menginstall plugin akan banyak kode-kode yang bertumpang tindih atau fungsinya saling bertabrakan. Dan ini menurut saya membuat dasbor website kita menjadi tidak kondusif, xixixi.
  • Meningkatkan skill. Dengan belajar membuat child theme semakin hari anda akan semakin mengerti WordPress itu apa sih dan gimana sih kerjanya. Walaupun masih harus banyak belajar untuk mengetahui gimana cara kerja core WordPress, hehehe. Setidaknya jadi tahu bagaimana cara kustomisasi WordPress.

Cara Membuat Child Themes

1. Membuat folder di wp-content => themes dan kemudian berikan nama sesuai dengan yang diinginkan dan disarankan untuk memberikan nama yang simple, tidak panjang banget, tidak pakai spasi, tidak menggunakan nama seperti password. Contoh: dartokloning, kloningspoon. Jika ingin menggunakan dua suku kata mungkin bisa menggunakan tanda minus (strip). Contoh: darto-keren, kloning-spoon, darto-gituh.

2. Membuat style.css didalam folder child themes.

/*
 Theme Name:   Darto KLoning
 Theme URI:    https://www.kloningspoon.com/
 Description:  Darto KLoning - We Share Because We Care
 Author:       Darto KLoning
 Author URI:   https://www.kloningspoon.com
 Template:     twentyfifteen
 Version:      2016.07.14
*/

/* Terapkan kustom css anda dibawah ini
============================================ */

Yang perlu diperhatikan adalah pada isian Template, dimana isinya harus sesuai dengan nama folder dari parent theme yang ingin kita gunakan.

3. Membuat functions.php didalam folder child themes.

<?php

/*=== Memanggil css tema utama ===*/

function panggil_style_tema_utama(){
wp_enqueue_style( 'tema-utama', get_template_directory_uri() . '/style.css' );
}

add_action( 'wp_enqueue_scripts', 'panggil_style_tema_utama' );

/* Terapkan kode php atau function anda dibawah ini
=================================================== */

4. Menyiapkan file gambar dengan resolusi 1200×900 pixel dengan nama screenshot.png. Gambar ini yang akan mewakili child theme yang sudah kita buat saat di lihat di menu Appearance (tampilan) => Themes (tema).

Selesai sudah untuk pembuatan child themenya. Selebihnya anda bebas mengutak-atik child themes anda.

Selamat berekspresi dan berjuang.

WordPress Calendar Widget Style

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/i

While developing a WordPress theme a lot of time you forget to style WordPress calendar widget. You can find many premium themes which do not care about WordPress calendar widget and i know i have also done a lot in past. Although it’s a lesser used functionlity but it is unwise to ignore if you are developing a premium WordPress theme.

Style 0

wordpress-calendar-widget-style0

#wp-calendar {
width:100%;
font-size:12px;
font-weight:300;
border-collapse:separate;
border-spacing:8px;
margin-left:-2px;
}

#wp-calendar
caption {
display:none;
}

#wp-calendar tbody
td {
margin-bottom:10px;
text-align:center;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-ms-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
border:1px solid #f4f4f4;
padding:6px;
}

#wp-calendar tbody td:hover {
border-color:#e2e2e2;
}

#wp-calendar tbody
td.pad {
border:0;
}

#wp-calendar tbody
td#today {
color:#47C2DC;
border-color:#47C2DC;
}

#wp-calendar tfoot td#prev a,#wp-calendar tfoot td#next
a {
color:#888;
font-size:12px;
font-weight:400;
position:relative;
text-transform:uppercase;
bottom:-9px;
margin-bottom:1px;
}

#wp-calendar tfoot
td#prev {
text-align:left;
}

#wp-calendar tfoot
td#next {
text-align:right;
}

#wp-calendar thead
th {
font-size:13px;
font-weight:400;
color:#888;
text-align:center;
padding-bottom:10px;
}

#wp-calendar tbody td
a,#wp-calendar tfoot td#prev a:hover,#wp-calendar tfoot td#next a:hover {
color:#47C2DC;
}

 Style 1

wordpress-calendar-widget-style1

.widget_calendar {float: left;}
#wp-calendar {width: 100%; }
#wp-calendar caption { text-align: right; color: #333; font-size: 12px; margin-top: 10px; margin-bottom: 15px; }
#wp-calendar thead { font-size: 10px; }
#wp-calendar thead th { padding-bottom: 10px; }
#wp-calendar tbody { color: #aaa; }
#wp-calendar tbody td { background: #f5f5f5; border: 1px solid #fff; text-align: center; padding:8px;}
#wp-calendar tbody td:hover { background: #fff; }
#wp-calendar tbody .pad { background: none; }
#wp-calendar tfoot #next { font-size: 10px; text-transform: uppercase; text-align: right; }
#wp-calendar tfoot #prev { font-size: 10px; text-transform: uppercase; padding-top: 10px; }

 Style 2

wordpress-calendar-widget-style2

#wp-calendar, #wp-calendar th, #wp-calendar td {
text-align: center;
background: none;
border: none;
}
#wp-calendar {
background: none;
empty-cells: hide;
width: 260px;
font: normal 11px / 200% Verdana, Arial, Helvetica, sans-serif;
}
#wp-calendar th {
font-style: normal;
font-weight: bold;
text-transform: capitalize;
border-bottom: 1px solid #666;
}
#wp-calendar td {
text-align: center;
background: transparent url(images/entry-meta.png) repeat-x top left;
padding: 0px;
border-bottom: 1px solid #ccc;
}
#wp-calendar td:hover {
background-color: red;
}
#wp-calendar a {
text-decoration: none;
display: block;
color: #fff;
}
#wp-calendar a:hover {
background: #c5d1d9;
color: #666;
}
#wp-calendar caption {
font-weight: bold;
text-align: center;
}
#wp-calendar #today {
rgba(255, 255, 255, 0.27);
}
#wp-calendar caption {
text-align: center;
width: 100%;
}
#wp-calendar .pad {
background-color: #fff;
}
#wp-calendar #next a {
padding-right: 10px;
text-align: right;
background: #f0f3f5;
color: #666;
}
#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
rgba(196, 196, 196, 0.67);
color: #666;
}
#wp-calendar #prev a:hover, #wp-calendar #next a:hover {
color: #fff;
}
#wp-calendar .pad, #wp-calendar .pad:hover {
background: rgba(255, 255, 255, 0);
}

 Style 3

wordpress-calendar-widget-style3

#wp-calendar { width: 100%; font-size: 11px; }
#wp-calendar thead th { background: #f5f5f5; border: 1px solid #ddd; border-top: none; font-size: 11px; }
#wp-calendar tbody td { text-align: center; border: 1px solid #ddd; line-height: 2.5em; transition: background 0.15s ease; -webkit-transition: background 0.15s ease; -o-transition: background 0.15s ease; -moz-transition: background 0.15s ease; }
#wp-calendar tbody td:hover { background: #f1f1f1; color: #333; }
#wp-calendar tbody td a { display: block; text-decoration: none; background: #f1f1f1; color: #333; }
#wp-calendar tbody td:hover a { background: #4d4d4d; color: #fff; }
#wp-calendar tfoot td { padding-top: 1px; padding: 4px; }
#wp-calendar caption { cursor: pointer; font-size: 13px; text-transform: uppercase; margin: 0; padding: 12px; outline: 0 none !important; background: #3b86b0; color: #fff; }
#wp-calendar tbody a { display: block; text-decoration: underline; }
#wp-calendar th { text-align: center; border: 1px solid transparent; border-top: none; padding: 7px 0; color: #a7a7a7; }
#footer #wp-calendar thead th { background: #222 }
#footer #wp-calendar tbody td { border-color: #222 }

 Style 4

wordpress-calendar-widget-style4

#calendar_wrap {
	border: 1px solid #DDD;
	border-radius: 4px;
	}

.widget_calendar #wp-calendar {
	width: 100%;
	}

.widget_calendar caption {
	font-size: 18px;
	font-style: italic;
	color: #777;
	background: #F4F4F4;
	padding: 5px 0 8px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #DDD;
	}

.widget_calendar th,
.widget_calendar td {
	text-align: center;
	}

.widget_calendar #today {
	background: #F4F4F4;
	border-radius: 4px;
	}

.widget_calendar #prev,
.widget_calendar #next {
	padding: 5px 0;
	}

 Style 5

wordpress-calendar-widget-style5

#wp-calendar { border-collapse: collapse; border:1px solid #ddd; width:100%; border-top:none; }
#wp-calendar td, #wp-calendar th { text-align:center; }
#wp-calendar caption { color: #fff; padding: 0; line-height: 39px; }
#wp-calendar thead, #wp-calendar tfoot { line-height:33px; background:#eee; }
#wp-calendar tbody { line-height:33px; }
#wp-calendar #prev, #wp-calendar #next { padding:0 10px; background:#eee; }
#wp-calendar #prev { text-align:left; }
#wp-calendar #next { text-align:right; }

 Style 6

wordpress-calendar-widget

#wp-calendar {
width:100%;
}

#wp-calendar caption {
color:#eee;
font-size:13px;
margin-top:0;
background:#111;
text-transform:uppercase;
padding:8px 0;
}

#wp-calendar thead {
font-size:10px;
background:#333;
color:#fff;
}

#wp-calendar thead th {
padding:4px 10px;
}

#wp-calendar tbody {
color:#aaa;
}

#wp-calendar tbody td {
background:#222;
color:#ccc;
text-align:center;
font-size:13px;
padding:2.5%;
}

#wp-calendar tbody td a {
color:#ccc;
text-decoration:underline!important;
}

#wp-calendar tbody td.pad {
background:#111;
}

#wp-calendar tbody .pad {
background:none;
}

#wp-calendar #today {
color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,.3);
background:0;
}

#wp-calendar tfoot #next {
font-size:10px;
text-transform:uppercase;
text-align:right;
}

#wp-calendar tfoot #prev {
font-size:10px;
text-transform:uppercase;
padding-top:5px;
}

 Style 7

wordpress-calendar-widget-style6

.widget_calendar {float: left;}
#wp-calendar {width: 100%; }
#wp-calendar caption { text-align: right; color: #333; font-size: 12px; margin-top: 10px; margin-bottom: 15px; }
#wp-calendar thead { font-size: 10px; }
#wp-calendar thead th { padding-bottom: 10px; }
#wp-calendar tbody { color: #aaa; }
#wp-calendar tbody td { background: #f5f5f5; border: 1px solid #fff; text-align: center; padding:8px;}
#wp-calendar tbody td:hover { background: #fff; }
#wp-calendar tbody .pad { background: none; }
#wp-calendar tfoot #next { font-size: 10px; text-transform: uppercase; text-align: right; }
#wp-calendar tfoot #prev { font-size: 10px; text-transform: uppercase; padding-top: 10px; }

A WordPress calendar comes with core wordpress classes which is pretty simple to customize. You can find a set of WordPress calendar widget core classes to customize it by your own.

.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}

 

source: small envelope, wp explorer

 

CSS: Responsive Template

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/r

Here empty style for your need to make responsive template or theme.

Before write style, in some condition, it’s better way to have meta in your header.

<meta name="viewport" content="width=1100" />

Here the empty responsive template CSS.

/*------------------------------------------------*/
/*-------------------[RESPONSIVENESS]------------------*/
/*------------------------------------------------*/

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
/* Styles */
}

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
/* Styles */
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {

/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

 

WordPress: Gravity Forms with Bootstrap 3 Style

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/z

You can create Gravity Forms to like Bootstrap 3 style, first, you need to enable/turn on Output HTML 5 (as YES) and turn off Output CSS (as NO), please go to Forms => Settings to do this.

After enable Output HTML5, add following style to your CSS:

.gform_wrapper ul {
  padding-left: 0;
  list-style: none; }

.gform_wrapper li {
  margin-bottom: 15px; }

.gform_wrapper form {
  margin-bottom: 0; }

.gform_wrapper .gfield_required {
  padding-left: 1px;
  color: #b94a48; }

.ginput_container input, .ginput_container select, .ginput_container textarea {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }

.ginput_container input:-moz-placeholder, .ginput_container select:-moz-placeholder, .ginput_container textarea:-moz-placeholder {
  color: #999; }

.ginput_container input::-moz-placeholder, .ginput_container select::-moz-placeholder, .ginput_container textarea::-moz-placeholder {
  color: #999; }

.ginput_container input:-ms-input-placeholder, .ginput_container select:-ms-input-placeholder, .ginput_container textarea:-ms-input-placeholder {
  color: #999; }

.ginput_container input::-webkit-input-placeholder, .ginput_container select::-webkit-input-placeholder, .ginput_container textarea::-webkit-input-placeholder {
  color: #999; }

.ginput_container input:focus, .ginput_container select:focus, .ginput_container textarea:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6); }

.ginput_container input[disabled], .ginput_container select[disabled], .ginput_container textarea[disabled], .ginput_container input[readonly], .ginput_container select[readonly], .ginput_container textarea[readonly], fieldset[disabled] .ginput_container input, fieldset[disabled] .ginput_container select, fieldset[disabled] .ginput_container textarea {
  cursor: not-allowed;
  background-color: #eee; }

textarea.ginput_container input, textarea.ginput_container select, textarea.ginput_container textarea {
  height: auto; }

.ginput_container textarea {
  height: auto; }

.gform_button {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  color: #fff;
  background-color: #428bca;
  border-color: #357ebd; }

.gform_button:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px; }

.gform_button:hover, .gform_button:focus {
  color: #333;
  text-decoration: none; }

.gform_button:active, .gform_button.active {
  outline: 0;
  background-image: none;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }

.gform_button.disabled, .gform_button[disabled], fieldset[disabled] .gform_button {
  cursor: not-allowed;
  pointer-events: none;
  opacity: .65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none; }

.gform_button:hover, .gform_button:focus, .gform_button:active, .gform_button.active, .open .dropdown-toggle.gform_button {
  color: #fff;
  background-color: #3276b1;
  border-color: #285e8e; }

.gform_button:active, .gform_button.active, .open .dropdown-toggle.gform_button {
  background-image: none; }

.gform_button.disabled, .gform_button[disabled], fieldset[disabled] .gform_button, .gform_button.disabled:hover, .gform_button[disabled]:hover, fieldset[disabled] .gform_button:hover, .gform_button.disabled:focus, .gform_button[disabled]:focus, fieldset[disabled] .gform_button:focus, .gform_button.disabled:active, .gform_button[disabled]:active, fieldset[disabled] .gform_button:active, .gform_button.disabled.active, .gform_button[disabled].active, fieldset[disabled] .gform_button.active {
  background-color: #428bca;
  border-color: #357ebd; }

.gform_wrapper .gfield_error .gfield_label {
  color: #b94a48; }

.gform_wrapper .gfield_error input, .gform_wrapper .gfield_error select, .gform_wrapper .gfield_error textarea {
  border-color: #eed3d7;
  background-color: #f2dede;
  color: #b94a48; }

.gform_wrapper .gfield_error input:focus, .gform_wrapper .gfield_error select:focus, .gform_wrapper .gfield_error textarea:focus {
  border-color: #b94a48;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(185, 74, 72, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(185, 74, 72, 0.6); }

.validation_error {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: #f2dede;
  border-color: #eed3d7;
  color: #b94a48; }

.validation_error h4 {
  margin-top: 0;
  color: inherit; }

.validation_error .alert-link {
  font-weight: bold; }

.validation_error>p, .validation_error>ul {
  margin-bottom: 0; }

.validation_error>p+p {
  margin-top: 5px; }

.validation_error hr {
  border-top-color: #e6c1c7; }

.validation_error .alert-link {
  color: #953b39; }

#gforms_confirmation_message {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px; }

#gforms_confirmation_message h4 {
  margin-top: 0;
  color: inherit; }

#gforms_confirmation_message .alert-link {
  font-weight: bold; }

#gforms_confirmation_message>p, #gforms_confirmation_message>ul {
  margin-bottom: 0; }

#gforms_confirmation_message>p+p {
  margin-top: 5px; }

.gallery-row {
  padding: 15px 0; }

.aligncenter {
  display: block;
  margin: 0 auto; }

.alignleft {
  float: left; }

.alignright {
  float: right; }

figure.alignnone {
  margin-left: 0;
  margin-right: 0; }

 

WordPress: Polldaddy Responsive

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/12

Currently, the standard Poll Daddy objects that I use are fixed width and not mobile responsive. Here are some simple CSS styles that I use to make Poll Daddy objects responsive to small devices.

@media only screen and (max-width: 400px) {
    .PDS_Poll { width: 100%; overflow:hidden; }
    .PDS_Poll .pds-box-outer { padding: 0; }
    .PDS_Poll .pds-box { width: 100% !important; border:none !important; }
    .PDS_Poll .pds-input-label { width: 100% !important; margin-left: -25px; padding-left: 25px; }
}

source: shibashake

WordPress: podPress Show Incorrectly, Player Show at Top Content Not at the Bottom Content

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/14

First time I setup WordPress for audio content, the first thing I remembered is podPress. But twice I setup podPress and I’m get podPress show incorrectly. The player show at top content, not at the bottom content as the General Settings I setup.

Screen Shot 2014-11-25 at 8.10.09 AM

As you can see at the picture, the player is show at the top content. But I want the player is show perfectly at the bottom.

Screen Shot 2014-11-25 at 8.10.32 AM

And the solution to the problem is, change the podpress.css in folder style. Just remove three line at the podpress.css. But in my case, I just make them commented.

.podPress_content .fluid-width-video-wrapper {
	position: static !important;
}

Screen Shot 2014-11-25 at 8.51.04 AM

 

Apache/.htaccess: Specify a Vary: Accept-Encoding header

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/2b

I guess it’s meant that you enable gzip compression for your css and js files, because that will enable the client to receive both gzip-encoded content and a plain content.

This is how to do it in apache2:

<IfModule mod_deflate.c>
    #The following line is enough for .js and .css
    AddOutputFilter DEFLATE js css

    #The following line also enables compression by file content type, for the following list of Content-Type:s
    AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml

    #The following lines are to avoid bugs with some browsers
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html 
</IfModule>

And here’s how to add the Vary Accept-Encoding header:

<IfModule mod_headers.c>
  <FilesMatch ".(js|css|xml|gz|html)$">
    Header append Vary: Accept-Encoding
  </FilesMatch>
</IfModule>

The Vary: header tells the that the content served for this url will vary according to the value of a certain request header. Here it says that it will serve different content for clients who say they Accept-Encoding: gzip, deflate (a request header), than the content served to clients that do not send this header. The main advantage of this, AFAIK, is to let intermediate caching proxies know they need to have two different versions of the same url because of such change.

 

source: stackoverflow – aularon and maxcdn