웹퍼블리셔의 팁 창고

SiteOrigin Page Builder (Page Builder by SiteOrigin) - media query breakpoints

Page scroll to id

- By malihu

- Description : Page scroll to id is a fully featured plugin which replaces browser’s “jumping” behavior with a smooth scrolling animation, when links with href value containing # are clicked. It provides all the basic tools and advanced functionality for single-page websites, in-page navigation, back-to-top links etc. with features like:

- Download : page-scroll-to-id.1.6.2.zip

- Version: 1.6.2

- Last updated: 3 주 ago

- Active installations: 90,000+

- WordPress Version: 3.3 or higher

- Tested up to: 4.9.8

PLUGIN RESOURCES, LINKS AND TUTORIALS

- DEMO (smooth scrolling animation) : http://manos.malihu.gr/repository/page-scroll-to-id/demo/demo.html

- Wordpress Plugin Site : https://ko.wordpress.org/plugins/page-scroll-to-id/

- Plugin homepage : http://manos.malihu.gr/page-scroll-to-id-for-wordpress/ (Originally published on January 16, 2017 by malihu)

- Knowledge Base – FAQ : http://manos.malihu.gr/page-scroll-to-id-for-wordpress/2/

- Basic tutorial : http://manos.malihu.gr/page-scroll-to-id-for-wordpress-tutorial/

- Video tutorial : http://manos.malihu.gr/page-scroll-to-id-for-wordpress-tutorial/#video-tutorial

OTHER/EXTERNAL RESOURCES

• Using Page scroll to id with the Divi Builder plugin
• One Page WordPress Smooth Scrolling Menu – How to Use Page Scroll to ID Plugin 2017
• Smooth scrolling between page sections using Page scroll to id
• Video tutorial: How to create a single page WordPress website
• GeneratePress – Elementor – Page Scroll to ID – One Page Website
• Onepage WordPress – Page scroll to iD plugin

http://support.hogash.com/support/topic/hide-header-footer-1-page-only/
Page Buider로 페이지 생성시 Header 혹은 Footer 숨기기

fullPage.js | One Page Scroll sections Site Plugin

- fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple http://alvarotrigo.com/fullPage/
- URL : https://alvarotrigo.com/fullPage/
- URL (GitHub) : https://github.com/alvarotrigo/fullPage.js

- Plugin Options : https://github.com/alvarotrigo/fullPage.js#options
- Version : v3.0.3
- Download : fullPage.js-master.zip

- CDN : https://cdnjs.com/libraries/fullPage.js

워드프레스 플러그인 : WP FullPage

wp-fullpage.4.0.5.2.zip

- 플러그인 웹사이트 :
http://wp-fullpage.juzed.fr/

- 워드프레스 플러그인 페이지 : 

https://ko.wordpress.org/plugins/wp-fullpage/
https://wordpress.org/plugins/wp-fullpage/

- 설명 : Wp Fullpage integrates the power of fullPage.js into your WordPress website.
- By Julien Zerbib

- Version: 4.0.5.2

- Last updated: 2 년 ago

- Active installations: 1,000+

- WordPress Version: 3.5 or higher

- Tested up to: 4.6.12

- Language: English (US)

※ Kallyas Theme 미지원

fullPage.js 플러그인을 워드프레스 사이트 적용하는 방법

1. theme header에 fullpage.js 로드 (scrolloverflow.js 로드가 필요시에는 fullpage.js 보다 앞에 로드시킴), 첨부파일은 kallyas theme의 header.php에 적용함
2. script, style은 첨부파일 참조
3. html 마크업(첨부파일 참조)

fullPage.js-master_적용.rar

Disable fullPage scrolling on mobile only

- URL : https://github.com/alvarotrigo/fullPage.js/issues/3109

- Check the responsive options in the docs (responsiveHeight and responsiveWidth) as well as the fp-auto-height-responsive class in case you need it.

- Responsive demo online : https://alvarotrigo.com/fullPage/examples/responsive.html

- Demo with fp-auto-height-responsive : https://alvarotrigo.com/fullPage/examples/autoHeightResponsive.html

- Remove fullpage in mobile :

if($(window).width() < 1024){ $('#fullpage').removeAttr('id'); }

NOTE : you have to write this code BEFORE starting fullpage.js

WPMU DEV | Build Apple-Inspired Full Page Scrolling Pages For Your WordPress Site (September 18, 2014)

Web Design Envato Tuts+ | Vertical and Horizontal Scrolling With fullPage.js (31 Aug 2015)

Webdesigner Depot | 25 free, scrolling plugins for awesome experiences (Dec 25, 2013)

Briefcase Elementor Widgets of BriefcaseWP | How to create Fullpage scrolling websites with Elementor

Using Player Parameters

https://help.vimeo.com/hc/en-us/articles/360001494447-Using-Player-Parameters

Autoplay video: &autoplay=1

Loop video: &loop=1

Hide title: &title=0

Hide Video uploader(author): &byline=0

Enable portrait(author’s profile image): &portrait=1

YouTube 내장 플레이어 및 플레이어 매개변수

https://developers.google.com/youtube/player_parameters?hl=ko

ex)

<iframe width="736" height="552" src="https://www.youtube.com/embed/AsgFL9e_wx8?autoplay=1&controls=0&loop=1&modestbranding=1&rel=0&showinfo=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

How To Use Vimeo Player Parameters (Youtube)

https://www.youtube.com/watch?v=xJtN9r2rvl8

New Window

<select onchange="if(this.value) window.open(this.value);">

<option value="">선택하세요.

<option value="http://www.google.com">Google

</select>

Current Window

<select onchange="if(this.value) location.href=(this.value);">

<option value="">선택하세요.

<option value="http://www.google.com">Google

</select>

Products > 제품 상세 > Advanced 탭 : Menu Order값이 안먹힐 때

[products limit="12" columns="4" category="AAA" orderby="menu_order"]

* orderby – Used to establish the order in which the products are shown, “menu_order”, “popularity”, “rating”, “date”, “price”, “price-desc”.
* order – Ascending or descending order, “asc” or “desc”.

URL : https://docs.woocommerce.com/document/woocommerce-product-search/shortcodes/woocommerce_product_filter_products/

position 속성이 아닌, 가상선택자와 flex를 이용하는 방법

HTML

<p>Some text<br />in a paragraph.</p>

<div class="hr-sect">CATEGORY</div>

<p>Some more text<br />in a paragraph.</p>

CSS

.hr-sect {display: flex; flex-basis: 100%; align-items: center; color: rgba(0, 0, 0, 0.35); font-size: 12px; margin: 8px 0px;}

.hr-sect::before, .hr-sect::after {content: ""; flex-grow: 1; background: rgba(0, 0, 0, 0.35); height: 1px; font-size: 0px; line-height: 0px; margin: 0px 16px;}

결과

출처 : https://jsfiddle.net/z8jddc0o/1/

'프린트' 버튼 클릭시 pdf 파일 인쇄하기 창 띄우기

function printTrigger(elementId) {

    var getMyFrame = document.getElementById(elementId);

    getMyFrame.focus();

    getMyFrame.contentWindow.print();

};

/* 영어 매뉴얼 인쇄 */

jQuery("#Manuel_Print_EN").click(function(){

printTrigger('iFramePdf_EN');

});

1. 버튼에 아이디 입력 : #Manuel_Print_EN

2. 컬럼에 다음 코드 입력 : <iframe id="iFramePdf_EN" src="xxx.pdf" style="width:1px; height:1px; opacity:0;"></iframe>

===========================================================================

Re: How to print Pdf file through window.Print() ?

Sep 30, 2013 06:47 PM|LINK

A function to house the print trigger:

function printTrigger(elementId) {

    var getMyFrame = document.getElementById(elementId);

    getMyFrame.focus();

    getMyFrame.contentWindow.print();

}

An button to give the user access: (an onClick on an a or button or input or whatever you wish)

<input type="button" value="Print" onclick="printTrigger('iFramePdf');" />

An iframe pointing to your PDF:

<iframe id="iFramePdf" src="myPdfUrl.pdf" style="dispaly:none;"></iframe>

Source: http://stackoverflow.com/questions/687675/can-a-pdf-files-print-dialog-be-opened-with-javascript

※ 익스플로러, 파이어폭스에는 정상 작동 안함

출처 : ASP.NET forum : How to print Pdf file through window.Print() ?
원출처 : https://stackoverflow.com/questions/687675/can-a-pdf-files-print-dialog-be-opened-with-javascript

(1) 여러 Marker가 있는 Map

<div id="map" style="width:100%; height:450px;"></div>

<script>

var map;

function initMap() {

map = new google.maps.Map(document.getElementById('map'), {

zoom: 2,

center: new google.maps.LatLng(29.540815, 122.142758),

mapTypeId: 'roadmap'

});

var iconBase = 'http://www.google.com/mapfiles/ms/micons/';

var icons = {

info: {icon: iconBase + 'red-dot.png'}

};

var features = [

{

position: new google.maps.LatLng(22.280331, 114.156599), type: 'info' //HongKong, Hong Kong

}, {

position: new google.maps.LatLng(31.138541, 121.424410), type: 'info' //Shanghai, China

}, {

position: new google.maps.LatLng(21.030567, 105.833943), type: 'info' //Hanoi, Vietnam

}, {

position: new google.maps.LatLng(13.752362, 100.500820), type: 'info' //Bangkok, Tailand

}, {

position: new google.maps.LatLng(-6.147824, 106.824968), type: 'info' //Jakarta, Indonesia

}, {

position: new google.maps.LatLng(51.513683, -0.092065), type: 'info' //London, English

}, {

position: new google.maps.LatLng(34.0194, -118.411), type: 'info' //Los Angeles, USA

}

];

// Create markers.

features.forEach(function(feature) {

var marker = new google.maps.Marker({

position: feature.position,

icon: icons[feature.type].icon, map: map

});

});

}

</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=Your_API_Key&callback=initMap&region=KR"></script>

(2) 단일 마커 생성 + 국가별 지도 생성

- 언어 옵션 파라미터 : &language=en
- 예 : <script async defer src=”https://maps.googleapis.com/maps/api/js?key=Your_API_Key&language=en&callback=initMap”></script>

en : English

en-Au : English (Australian)
en-GB : English (Great Britain)

da : Danish (덴마크어)
nl : Dutch (네덜란드어)
de : German (독일)
es : Spanish
it : Italian
fr : French
ru : Russian

ko : Korean
zh-CN : Chinese (Simlified : 간체)
zh-TW : Chinese (Traditional : 번체)
ja : Japanese
th : Thai
id : Indonesian
vi : Vietnamese

https://www.thewordcracker.com/miscellaneous/블로그에-구글맵을-삽입할-때-언어-지정하기/
언어 코드 목록 : https://developers.google.com/maps/faq#languagesupport

※ 2018년 7월 16일부로 구글지도 API가 유료화됨. 키 발급을 위해 해외결제 신용카드 정보를 반드시 입력해야 하며, API 발급 후 구글로부터 요금이 청구될 수 있습니다.

BOS - 구글지도 API 키 발급 받는 방법 : https://bos.kr:50300/kwa-manual_v-1601
Google Maps Platform : Web > Maps JavaScript API - Get API Key : https://developers.google.com/maps/documentation/javascript/get-api-key

[ZDNet Korea] 구글지도 무료사용 범위 축소된다 : http://www.zdnet.co.kr/news/news_view.asp?artice_id=20180608124750

[SPH] 키 없는 사용이 불가해진 구글맵, 그 대책은? - by suchoi : http://www.sphinfo.com/google-platform/

iT Chosun : 외신 [구글맵 API 유료화] ①6월 11일부터 과금 확정…국내 영향은? : http://it.chosun.com/site/data/html_dir/2018/05/17/2018051785054.html

SnapWidget : https://snapwidget.com/ (FREE / Instagram Grid 선택)

- 인스타그램 계정 정보 필요함
Username : @인스타그램 아이디

Description : 안적어도 무방

Thumbnail Size : 80px

Layout : 10 x 2

Photo Border: No

Background Color : #ffffff

Photo Padding(사진간격) : 1px

Hover Effect : Fade Out

Sharing Buttons : No

Responsive(반응형) : Yes
* 오운유

LightWidget - Responsive widget for Instagram : https://lightwidget.com

* 포듐 커피

※ 워드프레스 위젯 아닙니다.

카카오개발자센터 : 도구 > 초기화 도구 > OG(Open Graph) 캐시

https://developers.kakao.com/tool/clear/og

카카오톡 url 미리보기 이미지 사이즈 : 800*400 (2:1 비율)

https://devtalk.kakao.com/t/url/29679/2

관련 오픈그래프 태그

<meta property="og:image" content="썸네일 이미지 경로" />

<meta property="og:image:width" content="800" /><!--생략가능-->

<meta property="og:image:height" content="400" /><!--생략가능-->

<meta name="subject" content="닥터필 (Dr.fill) 공식 쇼핑몰"/>
<meta name="title" content="닥터필"/>
<meta name="description" content="닥터필(Dr.fill) 빠르고 간편한 피로회복 및 구강관리 보조제! 닥터필 프로젝트, 닥터필 제품소개" />
<meta name="author" content="㈜씨엘팜"/>
<meta name="keywords" content="피로회복 영양제, 프로폴리스, 벌꿀, 미세먼지, 구내염, 입냄새제거제, 금연보조" />

<meta property="og:locale" content="ko_KR" />
<meta property="og:type" content="Shopping Mall" /> <!-- article -->
<meta property="og:title" content="닥터필" /> <!-- 페이지 제목 -->
<meta property="og:description" content="닥터필(Dr.fill) 빠르고 간편한 피로회복 및 구강관리 보조제! 닥터필 프로젝트, 닥터필 제품소개" /> <!-- 페이지 설정 -->
<meta property="og:image" content="http://YourDomain.com/wp-content/uploads/2018/04/DrFill_og_image.jpg" />
<meta property="og:url" content="http://YourDomain.com/" />
<meta property="og:site_name" content="닥터필 (Dr.fill)" />

<meta name="twitter:card" content="Shopping Mall" />
<meta name="twitter:site" content="닥터필 (Dr.fill)" />
<meta name="twitter:title" content="닥터필" />
<meta name="twitter:description" content="닥터필(Dr.fill) 빠르고 간편한 피로회복 및 구강관리 보조제! 닥터필 프로젝트, 닥터필 제품소개" />
<meta name="twitter:creator" content="㈜씨엘팜" />
<meta name="twitter:image" content="http://YourDomain.com/wp-content/uploads/2018/04/DrFill_og_image.jpg" />
<meta name="twitter:domain" content="http://YourDomain.com/">

<link rel="canonical" href="http://YourDomain.com/">

<link rel="alternate" hreflang="en" href="http://YourDomain.com/" />
<link rel="alternate" hreflang="ko" href="http://YourDomain.com/ko/" />
    
<?php if ( defined( 'ICL_LANGUAGE_CODE' ) && 'ko' == ICL_LANGUAGE_CODE ) { ?>
	<meta property="og:locale" content="ko_KR" />
	<link rel="canonical" href="http://YourDomain.com/ko/">
<?php } else { ?>
	<meta property="og:locale" content="en_US" />
	<link rel="canonical" href="http://YourDomain.com/">
<?php } ?>

※ WordPress Feed URL (RSS 2.0 Format) : http://YourDomain.com/feed/ 

※ The Open Graph protocol : https://ogp.me/

※ Naver > 웹마스터도구 > 웹마스터도구 도움말 및 가이드 > 웹 표준 HTML 마크업 가이드 : https://webmastertool.naver.com/guide/basic_markup.naver

※ by language statement : https://webtip.tistory.com/entry/languageattributes-bloginfo-ICLLANGUAGECODE

※ Multilingual SEO / hreflang : https://webtip.tistory.com/entry/Multilingual-SEO-hreflang?category=879525
※ WordPress Feed URLs when Permalinks Enabled : https://webtip.tistory.com/entry/WordPress-Feed-URLs-when-Permalinks-Enabled

햄버거 메뉴 사용시의 득과 실을 확인하고, 적절한 대안을 제시

wp_usermeta 테이블
meta_key : wp_user_level
meta_value : 

10 : 관리자

7 : 편집자

2 : 글쓴이

1 : 기여자

0 : 구독자

출처 : https://github.com/gnuboard/gnupress/issues/3

타이틀 태그에, 사이트 제목 - 태그라인 형태로 최종 표기됨

do_shortcode() function

do_shortcode( string $content, bool $ignore_html = false )

Search content for shortcodes and filter shortcodes through their hooks.

[Wordpress] 위젯없이 php 파일에 shortcode 삽입법

<?php echo do_shortcode('[mb_latest name="notice" title="공지사항" list_size="5" style=""]'); ?>
: 망보드에서 최신글을 뽑아올 때 쓰는 쇼트코드
 - 출처 : illustudio 블로그 - 코르니유의 비밀 > 일상/잡상 > 워드프레스 – 위젯 없이 PHP 파일에 바로 쇼트코드(SHORTCODE) 삽입하기

https://developer.wordpress.org/reference/functions/do_shortcode/
https://www.thewordcracker.com/basic/shortcode-do_shortcode-function/

wp_footer()

Fire the wp_footer action.
Fire the 'wp_footer' action. Put this template tag immediately before </body> tag in a theme template (ex. footer.php, index.php).

add_action('wp_footer', 'my_function');

add_action('wp_footer', 'my_function1'); 

function my_function1( ) { 

    echo '<div style="display:none">My Text</div>'; 

}

https://developer.wordpress.org/reference/functions/wp_footer/
https://codex.wordpress.org/Function_Reference/wp_footer
https://codex.wordpress.org/Plugin_API/Action_Reference/wp_footer

do_action( 'init' )

Fires after WordPress has finished loading but before any headers are sent.

EX 1

add_action('init', 'my_php_function');

function my_php_function() {

    if (stripos($_SERVER['REQUEST_URI'], 'page-with-custom-php') !== false) {

        // add desired php code here

    }

}
Insert PHP code In Wordpress Page and Post : stack overflow : https://stackoverflow.com/questions/18896146/insert-php-code-in-wordpress-page-and-post

EX 2

add_action('init', 'my_function');

function my_function() {

    if (!is_user_logged_in()) {

   ?>

      <style>

  .selector {}

      </style>

   <?php

    }

}

https://developer.wordpress.org/reference/hooks/init/