Tìm tòi và nghịch về wordpress

sửa lại theme Real Home

tu vào lúc 01:27 0

1. Sửa độ rộng của các cột Footer.

ban đầu là 4 cột, và không sửa được độ rộng như ảnh phía đưới

để sửa độ rộng của các cột này theo ý mình, ta sửa trực tiếp vào code của theme. ta vào file theo đường dẫn:
\wp-content\themes\realhomes\assets\classic\partials\footer


<footer id="footer-wrapper">

   <div id="footer" class="container">

        <div class="row">

            <div class="span3">       <==== sửa Span3 thành Span1 đến Span 12 như ý muốn
                <?php if ( ! dynamic_sidebar( 'footer-first-column' ) ) : ?>
                <?php endif; ?>
            </div>

            <div class="span3">        <==== sửa Span3 thành Span1 đến Span 12 như ý muốn
                <?php if ( ! dynamic_sidebar( 'footer-second-column' ) ) : ?>
                <?php endif; ?>
            </div>

            <div class="clearfix visible-tablet"></div>

            <div class="span3">        <==== sửa Span3 thành Span1 đến Span 12 như ý muốn
                <?php if ( ! dynamic_sidebar( 'footer-third-column' ) ) : ?>
                <?php endif; ?>
            </div>

            <div class="span3">        <==== sửa Span3 thành Span1 đến Span 12 như ý muốn
                <?php if ( ! dynamic_sidebar( 'footer-fourth-column' ) ) : ?>
                <?php endif; ?>
            </div>

        </div>

   </div>

sau khi sửa thông số Span thì độ rộng của các cột này đã thay đổi như hình này

Đọc thêm »

sql

Hướng dẫn import database mysql bằng command

tu vào lúc 07:34 0

https://blogit.vn/huong-dan-import-database-mysql-bang-command.html

Làm cách nào để import được database nặng hơn mức cho phép? Bạn đã bao giờ import database nặng lên tới 1Gb, 2Gb hay nhiều hơn thế? Bạn thường sử dụng cách nào để import database nặng như vậy?

Mình thì hay sử dụng command(cmd) của window để import, rất đơn giản mà lại nhanh chóng nữa.

Bước 1: Trước tiên là bạn phải chuẩn bị trước cơ sở dữ liệu rồi, thường thì nên để trong ổ D:\\data.sql để khi gõ lệnh cho dễ. Bạn mở cmd của window lên bằng cách bấm phím window + r rồi gõ ‘cmd‘ và enter:

Hoặc bạn bấm phim window rồi gõ ‘cmd‘ cũng được ta sẽ thấy 1 khung màn hình đen hiện lên.

Bước 2: Nếu bạn cài xampp ở ổ C thì bỏ qua bước này, còn cài ở ổ khác thì thực hiện bước này, thường khi mình cài xampp thì mình sẽ không cài ở ổ C vì sau này cài lại win đỡ mất dữ liệu. Dưới đây là mình cài xampp ở ổ D:

Chúng ta gõ lệnh: d: để di chuyển về ổ D:

Hướng dẫn import database mysql bằng command

Bước 3: import cơ sở dữ liệu

Bạn thực hiện lệnh: D:\xampp\mysql\bin\mysql -u {username} -p {databasename} < file_name.sql

Ở đây do lúc cài đặt xampp mình cài bị duplicate thư mục xampp nên có câu lệnh trên mới có đoạn D:\>xampp\xampp\mysql… , còn thường thì D:\xampp\mysql… root là username, blogit.vn là tên bảng, D:\data.sql là cơ sở dữ liệu mình để trong ổ D, nếu bạn để ở đâu thì gọi đường dẫn đúng là được. Gõ đúng thì khi bạn enter nó sẽ hỏi password, thường lúc cài ở localhost sẽ không để mật khẩu nên bạn nhấn enter luôn, nêu có mật khẩu thì gõ vào rồi nhấn enter. Nếu data của bạn nặng thì phải đợi nó chạy lúc là ok.

Khi chạy xong nó sẽ tự động xuống dòng như hình trên là được rồi. Bạn vào http://localhost/phpmyadmin để kiểm tra lại kết quả.

Kết luận: Cả bài viết chỉ quan trọng nhất là câu lệnh D:\xampp\mysql\bin\mysql -u {username} -p {databasename} < file_name.sql. Bạn viết sao cho đúng username, databasename và địa chỉ file data cần import là được.

UPDATE: Nếu bạn gặp lỗi ERROR 2006 (HY000) at line 2964: MySQL server has gone away thì sẽ xử lý như sau:

Vào thư mục xampp tìm kiếm file tên my.ini. Sau đó tìm kiếm từ khóa “max_allowed_packet” thay các thông số thành 64M

max_allowed_packet = 64M

Bạn khởi động lại mysql và chạy lại lệnh nhé.

Chúc các bạn thành công. Có gì thắc mắc thì viết ở khung comment nhé.

Đọc thêm »

jwplayer 7 Plugin wordpress

cài đặt JWplayer cho wordpress làm site film self-hosted

tu vào lúc 09:53 3

Bạn biết đến JW player và Bạn đang dùng wordpress vậy chắc bạn muốn dùng JWplayer cho site film của mình, vậy các bước làm như sau

1. đăng ký 1 tài khoản JW Player tại http://www.jwplayer.com/sign-up/

2. đăng nhập vào tài khoản rồi tải trình chiếu film Jw player và copy licence key tại : https://dashboard.jwplayer.com/#/players/downloads

3. Upload JW Player vừa download được về lên 1 thư mục của web:

ví dụ như http://example.com/FOLDER-UPLOADED

4. cài thêm 1 Plugin "JW Player 7 for WordPress’ cài đặt và active plugin này.

5. cài đặt setting cho plugin JW player như hình:

- bạn cần điền đường dẫn đến file jwplayer.js trong thư mục file Up lên

- tiếp theo điền licence key của ứng dụng vào (lấy từ bước 2)

- tíc áp dụng cho post và page, rồi save setting này lại.

6. ok vậy là xong phần cài đặt Jw player cho wordpress rồi, bạn quay lại và tận hưởng thôi

Đọc thêm »

chat zalo chatbox chatbox facebook code

Code liên hệ ngay qua chat zalo, facebook, gọi điện

tu vào lúc 21:14 5

<div class="call-mobile2">
<a data-animate="fadeInDown" rel="noopener noreferrer" href="http://zalo.me/0982669299" target="_blank" class="button success" style="border-radius:99px;" data-animated="true">
<span>Chat Zalo </span></a>
</div>
<div class="call-mobile1">
<a data-animate="fadeInDown" rel="noopener noreferrer" href="https://www.facebook.com/viettech.viettech" target="_blank" class="button success" style="border-radius:99px;" data-animated="true">
<span>Chat Facebook</span></a>
</div>
<div class="call-mobile">

<a id="callnowbutton" href="tel:0982669299">0982.669.299</a><i class="fa fa-phone"></i>
</div>
<style>
.success.is-underline:hover, .success.is-outline:hover, .success {
background-color: #1E73BE;
padding: 10px;
color: white !important;
}
.call-mobile {background: #ED1C24;position: fixed;bottom: 10px;height: 40px;line-height: 40px;
padding: 0 0px 0 0px;border-radius: 40px;color: #fff;left: 20px;z-index: 99999;
}
.call-mobile1 {position: fixed;bottom: 52px;height: 40px;line-height: 40px;
padding: 0 0px 0 0px;border-radius: 40px;color: #fff;left: 20px;z-index: 99999;
}
.call-mobile2 {position: fixed;bottom: 93px;height: 40px;line-height: 40px;
padding: 0 0px 0 0px;border-radius: 40px;color: #fff;left: 20px;z-index: 99999;
}
.call-mobile i {font-size: 20px;line-height: 40px;background: #B52026;
border-radius: 100%;width: 40px;height: 40px;
text-align: center; float: right;
}
.call-mobile a {color: #fff;font-size: 18px;font-weight: bold; text-decoration: none;
margin-right: 10px; padding-left: 10px;}
</style>

Đọc thêm »

Hướng dẫn sử dụng sentora

tu vào lúc 11:14 0

https://www.youtube.com/playlist?list=PLaqg_CC2g4_2uUL7beRnvzdwfunEFwnVN

Đọc thêm »

AccessPress Social Login Plugin wordpress

Cách thiết lập đăng nhập bằng tài khoản facebook hoặc google cho wordpress với Plugin: AccessPress Social Login

tu vào lúc 23:46 0

Đầu tiên cần cài Plugin: AccessPress Social Login Lite here
Bước tiếp theo sẽ tiến hành đăng kí client ID & Client Secret

https://console.developers.google.com/iam-admin/projects –> click vào create project

2. Điền Project Name —> bấm Create

3. Một cửa sổ mới hiện ra —> chọn Google+ API

4. Chuyển đến trang mới —> bấm vào nút ENABLE màu xanh trên cùng

5. bấm vào Go to Credentials

6. Chọn như trong hình

7. Sau khi bấm vào nút [what credentials do i need?] nó dẫn đến trang cấu hình bạn điền cái của bạn như trong hình

10.

Copy 2 cái Client ID vs Client Secret vào Plugin là xong.

Chúc các bạn thành công

…. không hiểu cứ email hoặc inbox các kiểu con đà điểu nhá

Đọc thêm »

sửa theme gon

Menu bên phải

tu vào lúc 01:57 0

đoạn code để tạo menu bên trái dạng cột như này :


<ul class="product-categories">

<li class="vc_tta-tab vc_active"><img src="http://vuacuago.com/wp-content/uploads/2016/06/logo-huge-mini.png" alt="cửa gỗ chống nước Duratek" width="16" height="16" /> <strong><a href="http://vuacuago.com/cua-go-duratek/"> Cửa Gỗ DURATEK</a></strong></li>

<ul class="chidren">

<li><a href="http://vuacuago.com/cua-go-duratek/cua-go-gravo/"><img src="http://vuacuago.com/wp-content/uploads/2016/06/logo-huge-mini.png" alt="cửa gỗ chống nước tuyệt đối duratek gravo" width="16" height="16" /><strong>DURATEK Gravo</strong></a></li>

<li><img src="http://vuacuago.com/wp-content/uploads/2016/06/logo-huge-mini.png" alt="cửa gỗ chống nước tuyệt đối duratek flatta" width="16" height="16" /><strong><a href="http://vuacuago.com/cua-go-duratek/cua-go-flatta/">DURATEK Flatta</a></strong></li>

<li><img src="http://vuacuago.com/wp-content/uploads/2016/06/logo-huge-mini.png" alt="cửa gỗ chống nước tuyệt đối duratek Lineart" width="16" height="16" /><strong><a href="http://vuacuago.com/cua-go-duratek/cua-go-line-art/">DURATEK Line Art</a></strong></li>

<li><img src="http://vuacuago.com/wp-content/uploads/2016/06/logo-huge-mini.png" alt="cửa gỗ chống nước tuyệt đối duratek colorlife" width="16" height="16" /><strong><a href="http://vuacuago.com/cua-go-duratek/cua-go-color-life/">DURATEK Color life</a></strong></li>

</ul>

<li><img src="http://vuacuago.com/wp-content/uploads/2016/06/logo-huge-mini.png" alt="cửa gỗ tự nhiên Solitek" width="16" height="16" /><strong><a href="http://vuacuago.com/cua-go-solitek/">Cửa Gỗ SOLITEK</a></strong>

<ul class="children">

<li><img src="http://vuacuago.com/wp-content/uploads/2016/06/logo-huge-mini.png" alt="cửa gỗ tự nhiên Solitek classic" width="16" height="16" /><strong><a href="http://vuacuago.com/cua-go-solitek/cua-go-solitek-classic/">SOLITEK Classic</a></strong></li>

<li><img src="http://vuacuago.com/wp-content/uploads/2016/06/logo-huge-mini.png" alt="cửa gỗ tự nhiên Solitek duluxe" width="16" height="16" /><strong><a href="http://vuacuago.com/cua-go-solitek/cua-go-solitek-deluxe/">SOLITEK Deluxe</a></strong></li>

<li><img src="http://vuacuago.com/wp-content/uploads/2016/06/logo-huge-mini.png" alt="cửa gỗ tự nhiên Solitek full white" width="16" height="16" /><strong><a href="http://vuacuago.com/cua-go-solitek/cua-go-solitek-full-white/">SOLITEK Full White</a></strong></li>

</ul>

</li>

<li class="cat-item cat-item-50"><img src="http://vuacuago.com/wp-content/uploads/2016/06/logo-huge-mini.png" alt="Vietnam flag" width="16" height="16" /><strong><a href="http://vuacuago.com/product-category/cua-go-metatek/">Cửa Gỗ METATEK</a></strong></li>

</ul>

Cấu hình Fail2Ban

Đọc thêm »

sửa theme gon

Sửa độ dày breadcrum theme gon

tu vào lúc 00:24 0

Để thu bé khoảng cách Breadcrumb này lại cần sửa trong file Style.css và tìm với từ khóa breadcrumb-title-wrapper

Trong file style.CSS ta tìm đến đoạn code

/*- 1. BREADCRUMB -----------------------------------------------------------------------------------------------------*/

.breadcrumb-title-wrapper{

width:100%;

margin:0;

display:block;

background-size:cover;

-webkit-background-size:cover;

background-position:center;

padding:70px 0 70px 0; <==== sửa 70px thành 10px là được

position:relative;

z-index:0;

}

sau khi sửa và save lại ta có kết quả như sau:

Đọc thêm »

sửa theme gon

chỉnh sửa độ rộng của phần header của theme gon bị thừa

tu vào lúc 00:16 3

Để xóa khoảng cách thừa ra như trong ảnh

1. vào file style.css của theme gốc

tìm đến đoạn có code sau:





/*- 3. HEADER MIDDLE --------------------------------------------------------------------------------------------------*/

.header-middle{

 padding-top:40px;                          <======= sửa thông số này để được như mong mốn

 padding-bottom:40px;                     <======= sửa thông số này để được như mong mốn

}

.header-v6 .header-middle{

 padding-top:0;

 padding-bottom:0;

}

.header-v3 .header-middle > .container,

.header-v5 .header-middle > .container{

 max-width:100%;

 width:100%;

 padding:0;

}

.header-middle > .container

{

 display:table;

}

.header-v5 .header-middle > .container

{

 table-layout:fixed;

}

.header-middle > .container > div{

 vertical-align:middle;

 display:table-cell;

}

Copy phần này sang theme child và sửa thông số sau theo ý muốn


.header-middle{


 padding-top:40px;

 padding-bottom:40px;

}

Kết quả gọn và đẹp như này:

<------------------------ hết phần chỉnh sửa độ dày header -------------------------->

giờ muốn thu hẹp khoảng cách này:

mở file Style.css tìm đến search-wrapper

/* Search version 2 */

.header-v2 .search-wrapper,

.header-v4 .search-wrapper{

 width:25.333333%;                                 <======= sửa kích thước này xuống còn 25%

}

.header-v2 .search-wrapper form,

.header-v4 .search-wrapper form,

.header-v6 .search-wrapper form,

.header-v7 .search-wrapper.search-mobile form,

.header-v8 .search-wrapper form{

 position:relative;

}

.header-v2 .search-wrapper .search-field,

.header-v2 .search-wrapper form,

.header-v4 .search-wrapper .search-field,

.header-v4 .search-wrapper form{

 max-width:270px;

 display:inline-block;

 width:100%;

}

.header-v2.hidden-cart.show-search .search-wrapper .search-field,

.header-v2.hidden-cart.show-search .search-wrapper form,

.header-v4.hidden-cart.show-search .search-wrapper .search-field,

.header-v4.hidden-cart.show-search .search-wrapper form{

 max-width:320px;

}

.header-v2 .search-wrapper input[type="text"],

.header-v4 .search-wrapper input[type="text"],

.header-v6 .header-middle .search-wrapper input[type="text"],

header.ts-header .header-v8 .header-middle .search-wrapper input[type="text"],

.header-v7 .header-middle .search-wrapper.search-mobile input[type="text"]{

 padding-right:33px; /* rtl */

}

.header-v2 .search-wrapper input[type="submit"],

.header-v4 .search-wrapper input[type="submit"],

.header-v6 .header-middle .search-wrapper input[type="submit"],

header.ts-header .header-v8 .header-middle .search-wrapper input[type="submit"],

.header-v7 .header-middle .search-wrapper.search-mobile input[type="submit"]{

 position:absolute;

 right:8px; /* rtl */

 top:7px;

 content:"";

 font-size:0;

 background:url(images/image.png) 3px -26px no-repeat !important;

 opacity:0.8;

 z-index:2;

 border:0 !important;

 padding:0 !important;

 width:30px;

 height:30px;

 transition:all 300ms ease 0s;

 -webkit-transition:all 300ms ease 0s;

 -moz-transition:all 300ms ease 0s;

}

.header-v2 .search-wrapper input[type="submit"]:hover,

.header-v4 .search-wrapper input[type="submit"]:hover,

.header-v6 .header-middle .search-wrapper input[type="submit"]:hover,

header.ts-header .header-v8 .header-middle .search-wrapper input[type="submit"]:hover,

.header-v7 .header-middle .search-wrapper.search-mobile input[type="submit"]:hover{

 background-position:3px -51px !important;

 opacity:1;

}

Kết quả là khoảng cách đã được thu gọn lại như này

<------------------------ hết phần chỉnh sửa khoảng cách giữa hộp search box -------------------------->

do ta thấy banner logo này hơi bé, mà trong logo mang nhiều thông tin cửa hàng, nên muốn phóng to ra, ta xem logo này thuộc class nào, rồi vào sửa file style.css trong theme tìm với từ khóa của class đó. sửa như hình

bạn mở file Style.css trong theme, tìm đến class: logo-wrapper đoạn code như phía dưới và sửa thông số đi như bên dưới rồi lưu vào


/* Version 2 */


.header-v2 .logo-wrapper,

.header-v4 .logo-wrapper{

 width:33.333333%;                      <=== sửa cái này lên thành 70 

 text-align:center;

}

.header-v2.hidden-cart.show-search .header-middle > .container,

.header-v4.hidden-cart.show-search .header-middle > .container{

 direction:rtl;/* rtl */

}

.header-v2.hidden-cart.show-search .header-middle > .container > div *,

.header-v4.hidden-cart.show-search .header-middle > .container > div *{

 direction:ltr;/* rtl */

}

.header-v2.hidden-cart.hidden-search .logo-wrapper,

.header-v4.hidden-cart.hidden-search .logo-wrapper{

 width:100% !important;

 text-align:center;

}

.header-v2.hidden-search.show-cart .logo-wrapper, 

.header-v4.hidden-search.show-cart .logo-wrapper,

.header-v2.hidden-cart.show-search .logo-wrapper, 

.header-v4.hidden-cart.show-search .logo-wrapper{

 width:50%;

 text-align:left /* rtl */

}

.header-v2.hidden-cart.show-search .search-wrapper, 

.header-v4.hidden-cart.show-search .search-wrapper{

 width:50%;

 text-align:right;/* rtl */

}

.header-v2.hidden-cart.show-search .logo-wrapper, 

.header-v4.hidden-cart.show-search .logo-wrapper{

 width:50%;

 text-align:left; /* rtl */



}

Hoặc cách khác sửa ngay trên web thì bạn tìm như trong ảnh

- Kết quả là banner chữ này đã to ra như hình dưới

------------- end
sửa Widget logo trên phiên bản destop và Mobile.

với Phiên Bản máy tính thì

trước khi sửa sau khi sửa

vào editor và sửa


/* FIX FOR WIDGET */


.widget-container .ts-logo-slider-wrapper.show-nav .content-wrapper .logos,
.ts-row-wide .widget-container .ts-logo-slider-wrapper{
 padding-left: 25px;       <=== sửa thành 25px
 padding-right:0;
}

đối với phiên bản mobile thì vào file: /home/vuacuago.com/public_html/wp-content/themes/gon/css/reset.css

tìm CUSTOM DEFAULT


/*- 1. CUSTOM DEFAULT ---





.owl-carousel .product-wrapper .meta-wrapper *{
 backface-visibility:hidden;
 -moz-backface-visibility:hidden;
 -webkit-backface-visibility:hidden;
}
*
{
 margin:0;
 padding:0;
 box-sizing:border-box;
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
}
*:before,
*:after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

html, body 
{
 text-align:left;/* rtl */                <===== sửa left thành center
 font-weight:normal;
 font-style:normal;
 vertical-align: baseline;
 float:left;
 width:100%;
 -webkit-text-size-adjust: none;
 -ms-text-size-adjust: none;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 word-break:normal;
 background:#fff;
 letter-spacing:0;
 background-size:container;
}

<------------------------ hết phần chỉnh sửa căn lề của đối tác -------------------------->

Thêm phần Sticker hiện số điện thoại.

Cực đơn giản luôn
Bước 1: vào file Style.css của theme và thêm đoạn css sau:


/* code css hiện stick */



.fone {
    font-size: 22px;
    color: #f00;
    line-height: 40px;
    font-weight: bold;
    padding-left: 15px;
    margin: 0 0;
}
.tel{background-color: #eee;}
.fix_tel { position:fixed; bottom:15px; right:0; z-index:999;}
.tel { background: #eee;width:175px; height:40px; position:relative; overflow:hidden;background-size:40px;border-radius:28px;border:solid 1px #ccc;}
.fix_tel{top: auto; right: auto; bottom: 15px; left: 5px; }

Bước 2: dán đoạn code sau vào file footer.php


/* code hiện số điện thoại*/



<div class="fix_tel">
            <div class="tel">
             <p class="fone">0848 313 686</p>
           </div>
       </div>