Shopping Mall2018. 12. 5. 21:08

WooCommerce의 한국 PG사 연동을 위한 워드프레스 플러그인사 / 플러그인

(1) 코드엠샵의 PGALL
 * Website : https://www.pgall.co.kr/
 * 코드엠샵 : https://www.codemshop.com/

 * WordPress Plugins Page | PGALL 워드프레스 결제 – 우커머스 결제 플러그인 By CodeMShop : https://wordpress.org/plugins/pgall-for-woocommerce/

 * WordPress Plugins Page | PGALL 우커머스 네이버페이 – PGALL Woocommerce NAVER PAY By CodeMShop : https://wordpress.org/plugins/mshop-npay/


(2) 아임포트
 * Website : https://www.iamport.kr/

 * WordPress Plugins Page | 우커머스용 아임포트 플러그인(국내 모든 PG를 한 번에) by SIOT : https://srd.wordpress.org/plugins/iamport-for-woocommerce/


(3) planet8의 우페이(woopay)

 * Website : http://woopay.co/

 * WordPress Plugins Page | WooPay – Inicis by Planet8 : https://srd.wordpress.org/plugins/woopay-inicis/


(4) 그누페이
 * WordPress Plugins Page | GNUPAY – KG Inicis by SIR Soft : https://srd.wordpress.org/plugins/gnupay-inicis/
 * 포럼 : http://sir.kr/main/gnupay/


(5) 페이게이트 결제 모듈 for WordPress Woocommerce Plugin by sunnysidesoft | https://github.com/sunnysidesoft/woocommerce-paygate (개발 중단)




한국형 E-Commerce 패키지

망보드 커머스(쇼핑몰) 패키지 : https://www.mangboard.com/store/

코드엠샵 : https://www.codemshop.com/product-category/solution/

BBS e-Commerce : http://www.bbsetheme.com/bbse-commerce-intro




코드엠샵 내 'PG 온라인 가입 신청' 이후 PG사별 가입절차

- 출처 : 코드엠샵 : https://www.pgall.co.kr/apply-okay/


※ 코드엠샵의 pgall 가입페이지 : https://www.pgall.co.kr/apply-online/

※ 코드엠샵의 pgall 내 결제대행사 심사 전 체크사항 : https://www.pgall.co.kr/mysite-check/

Posted by cpu21
Shopping Mall2018. 12. 5. 19:05
  • 상호 및 대표자 성명
  • 사업장 주소(소비자의 불만을 처리할 수 있는 곳의 주소를 포함)
  • 전화번호·전자우편주소
  • 개인정보관리책임자 이름(이메일)
  • 호스팅 제공자 : 전자상거래법 규정에 따라 호스팅서비스 제공자 상호를 반드시 표시하도록 의무화됨. 예) 호스팅 제공자 : (주)카페24 또는 Hosting by cafe24
  • 사업자등록번호 : 사업자등록증과 일치하는 번호로 기입
  • 통신판매업신고번호 : 통신판매업신고는 에스크로 심사가 완료된 이후에 신청 가능하기 때문에 결제대행사 입점시 필수사항은 아님
  • 인터넷쇼핑몰 이용약관 : 차후 발생할 수 있는 고객과의 갈등 상황을 사전에 방지하도록 하기 위해 필요하며, 서비스 이용자에게 공시함으로써 효력이 발생. 영업상 중요 사유가 있을 시 변경할 수 있지만 반드시 고객에게 알려야 함.
  • 개인정보취급방침
  • 에스크로 마크(링크) : 쇼핑몰을 개설시 에스크로 가입 증서가 없으면 통신판매업 등록 불가



예)

법인명(상호) : (주)홍길동상사 | 대표자 : 홍길동 | 사업자등록번호 : 123-45-67890 | 통신판매업 신고 : 제2018-서울강남-1205호 [사업자 정보확인]
전화 : 070-1234-5678 | 팩스 : 070-1234-5679 | 주소 : 12345 서울특별시 중구 세종대로 110

이메일 : test@test.com | 개인정보보호책임자 : 김길동(test@test.com)


※ [사업자 정보확인] 링크 태그 : <a href="#none" onclick="window.open('http://www.ftc.go.kr/bizCommPop.do?wrkr_no=1234567890', 'bizCommPop', 'width=750, height=950;');return false;">[사업자정보확인]</a>



법제처 | 표시 관련 의무 : http://easylaw.go.kr/CSP/CnpClsMain.laf?popMenu=ov&csmSeq=25&ccfNo=3&cciNo=1&cnpClsNo=1

Posted by cpu21
jQuery2018. 12. 3. 00:35

function preloading (imageArray) {

let n = imageArray.length;

for (let i = 0; i < n; i++) {

let img = new Image();

img.src = imageArray[i];

}

};


preloading([

'/your-url/your-file1.jpg', '/your-url/your-file2.jpg', '/your-url/your-file3.jpg'

]);



크롬 개발자 도구(Chrome DevTools, Ctrl+Shift+I) > Network 탭을 통해 확인 가능


- Ref. Site : https://www.photo-mark.com/notes/image-preloading/

Posted by cpu21
WordPress/Plugin2018. 12. 3. 00:24

Insert PHP Code Snippet

- WordPress.org Plugin Page : https://wordpress.org/plugins/insert-php-code-snippet/
- by xyzscripts.com

- Version : 1.3.3
- Last updated : 5 months ago
- Active installations : 100,000+
- WordPress Version : 2.8 or higher
- Tested up to : 5.9.3

 

Description
A quicklook into Insert PHP Code Snippet
★ Convert PHP snippets to shortcodes
★ Insert PHP code easily using shortcode
★ Support for PHP snippet shortcodes in widgets
★ Dropdown menu in TinyMCE editor to pick snippet shortcodes easily

 

FEATURES IN DETAIL
Insert PHP Code Snippet allows you to create shortcodes corresponding to PHP code snippets. You can create a shortcode corresponding to any random PHP code such as ad codes, login validation etc. and use the same in your posts, pages or widgets.

The shortcodes generated using the plugin are easily available as a dropdown in the standard wordpress content editor as well as in widget settings, thereby giving you ease of integrating your PHP snippets with your posts and pages.

 

- Screenshot :

 

Insert Headers and Footers

- WordPress.org Plugin Page : https://wordpress.org/plugins/insert-headers-and-footers/

- By WPBeginner

- Version: 1.4.3

- Last updated: 6 months ago

- Active installations: 600,000+

- WordPress Version: 3.6 or higher

- Tested up to: 4.9.8

 

Description :

EASILY INSERT HEADER AND FOOTER CODE

Insert Headers and Footers is a simple plugin that lets you insert code like Google Analytics, custom CSS, Facebook Pixel, and more to your WordPress site header and footer. No need to edit your theme files!

The simple interface of the Insert Headers and Footers plugin gives you one place where you can insert scripts, rather than dealing with dozens of different plugins.

 

FEATURES OF INSERT HEADERS AND FOOTERS :

  • Quick to set up
  • Simple to insert scripts
  • Insert header code and/or footer code
  • Add Google Analytics code to any theme
  • Add custom CSS across themes
  • Insert Facebook pixel code
  • Insert any code or script, including HTML and Javascript

- Screenshot :

 

 

Header and Footer Scripts

- WordPress.org Plugin Page : https://wordpress.org/plugins/header-and-footer-scripts/

- By Digital Liberation

- Version: 2.1.0

- Last updated: 11 months ago

- Active installations: 90,000+

- WordPress Version: 4.0 or higher

- Tested up to: 4.9.8

- PHP Version: 5.3 or higher

 

- Description :

If you are running a WordPress site then sooner or later you need to insert some kind of code to your website. It is most likley a web analytics code like Google Analytics or may be social media script or some CSS stylesheet or may be Custom fonts. This plugin will do all the magic. Even if you want to insert those codes in a custom post type.

All you have to do is adding appropriate html code.

 

Don't forget to wrap your code with proper tags.

<script type="text/javascript">

YOUR JS CODE HERE

</script>

 

Or for CSS:

<style type="text/css">

YOUR CSS CODE HERE

</style>

 

WHY USE THIS PLUGIN:

  • To insert CSS and JavaScript codes to <head> or before </body>.
  • To insert code to <head> of any single page or post.
  • To insert code to Custom Post Type [New Feature].
  • The plugin should be compatible with WooCommerce.

 

 

Scripts n Styles

- WordPress.org Plugin Page : https://wordpress.org/plugins/scripts-n-styles/

- by unFocus Projects

- Version: 3.4.5

- Last updated: 3 weeks ago

- Active installations: 30,000+

- WordPress Version: 4.9.8 or higher

- Tested up to: 5.0

 

- Description :

This plugin allows Admin users the ability to add custom CSS and JavaScript directly into individual Post, Pages or any other registered custom post types. You can also add classes to the body tag and the post container. There is a Global settings page for which you can write Scripts n Styles for the entire blog.

 

Admin’s can also add classes to the TinyMCE “Formats” dropdown which users can use to style posts and pages directly. As of Scripts n Styles 3+ styles are reflected in the post editor.

 

Because only well trusted users should ever be allowed to insert JavaScript directly into the pages of your site, this plugin restricts usage to admin type users. Admin’s have access to even more sensitive areas by definition, so that should be relatively safe

 

- Screenshot :

 

 

Scripts To Footer

- WordPress.org Plugin Page : https://wordpress.org/plugins/scripts-to-footerphp/

- by Joshua David Nelson

- Version: 0.6.3

- Last updated: 3 months ago

- Active installations: 20,000+

- WordPress Version: 3.1.0 or higher

- Tested up to: 4.9.8

- Description :

This small plugin moves scripts to the footer. Note that this only works if you have plugins and a theme that utilizes wp_enqueue_scripts correctly.
You can disable the plugin on specific pages and posts directly via the post/page edit screen metabox.
You can disable the plugin on specific archive pages (blog page, search page, post type and taxonomy archives) via the settings page.

- Screenshot :

 

 

JavaScript to Footer

- WordPress.org Plugin Page : https://wordpress.org/plugins/footer-javascript/

- By Vladimir Prelovac

- Version: 0.4.1

- Last updated: 4 years ago

- Active installations: 3,000+

- WordPress Version: 2.3 or higher

- Tested up to: 4.2.21

Description :

The Yahoo! Exceptional Performance team recommends placing scripts at the bottom of your page because of the way browsers download components.

“The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames.

In some situations it’s not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page’s content, it can’t be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.”

WordPress default behavior is to load javascript in the page.

This plugin will move all javascript code to the footer if the plugins have declared javascript properly.

Plugin by Vladimir Prelovac. Looking for WordPress Services?

 

 

 

Ways to insert Custom JavaScript into WordPress pages or posts

(1) Load a separate JavaScript file using WordPress’ script loader

(2) Use the wp_footer or wp_head hooks to add the script inline

(3) Use a plugin to add header or footer scripts

(4) Modify your theme to include the script (bad idea)

(5) Use the WordPress post editor (really bad idea not worth discussing)

 

Adding JavaScript Inline With WordPress Hooks

(1) Add PHP to your footer

// Add scripts to wp_footer()

function child_theme_footer_script() {

// Your PHP goes here

}

add_action( 'wp_footer', 'child_theme_footer_script' );

 

(2) Add HTML to your header, footer

<?php

/**

Add scripts to wp_header()

*/

add_action( 'wp_head', 'my_header_scripts' );

function my_header_scripts(){

  ?>

  <script>alert( 'Hi Roy' ); </script>

  <?php

}

 

<?php

/**

Add scripts to wp_footer()

*/

add_action( 'wp_footer', 'my_footer_scripts' );

function my_footer_scripts(){

  ?>

  <script>alert( 'Hi Roy' ); </script>

  <?php

}

 

or

 

// Add scripts to wp_footer()

function child_theme_footer_script() { ?>

<!-- Your HTML goes here -->

<?php }

 

add_action( 'wp_footer', 'child_theme_footer_script' );

 

 

 

How To Include A JavaScript File In WordPress The Right Way

아래은 wp_enqueue_scripts를 사용하여 하위 테마의 기본 디렉토리에 있는 "custom-scripts.js"라는 스크립트를 로드하는 예입니다.

add_action( 'wp_enqueue_scripts', 'my_custom_script_load' );

function my_custom_script_load(){

  wp_enqueue_script( 'my-custom-script', get_stylesheet_directory_uri() . '/custom-scripts', array( 'jquery' ) );

 

}

 

 

(6) Disable WordPress filtering of script tags

JavaScript 내에서 스크립트 태그 차단을 사용 중지할 수 있습니다. wp-config.php에서 다음 코드 줄을 추가하여 사용자 정의 태그를 활성화해야합니다.

define( 'CUSTOM_TAGS', true );

 

functions.php 페이지에서 다음 코드를 추가할 수 있습니다 :

function add_scriptfilter( $string ) {

global $allowedtags;

$allowedtags['script'] = array( 'src' => array () );

return $string;

}

add_filter( 'pre_kses', 'add_scriptfilter' );

 

Note: Once again, we have to warn against using the above method. Enabling the script tag via this method disables the security feature sitewide for any user permission level. (이 방법을 통해 script 태그를 활성화하면 모든 사용자 권한 수준의 보안 기능이 비활성화됩니다.)

 

 

(7) Use Advanced Custom Fields

Advanced Custom Fields는 많은 코드를 개발할 필요없이 사용자 정의 필드를 구현할 수있는 널리 사용되는 플러그인입니다.

 

 

Conclusion :

플러그인 사용을 하지않고 효율적 커스텀 js 로딩을 위해 wp_footer 혹은 wp_head 훅을 이용

 

(1) child theme의 functions.php 페이지에서 다음 function을 추가

add_action('wp_footer', 'CustomJS'); 

function CustomJS( ) { 

    echo '<script src="/wp-content/themes/your-child-theme/custom.js"></script>'; 

}

(2) custom.js을 에디팅하여 이용

 

 

 

- 출처 : https://calderaforms.com/2016/11/how-to-load-custom-javascript-in-wordpress/

- 출처 (6), (7) : https://www.godaddy.com/garage/3-ways-to-insert-javascript-into-wordpress-pages-or-posts/

- 출처 : http://volatylthemes.com/footer/

- [Wordpress] wp_footer() function : http://webtip.tistory.com/entry/Wordpress-wpfooter-function?category=827739

Posted by cpu21
CSS2018. 11. 30. 09:38

Windows XP : 굴림
Windows Vista, 7, 8, 10 : 맑은 고딕
OS X 라이언 (10.8) : 애플 고딕

OS X 마운틴 라이언 (10.9) : 애플 산돌 고딕 네오

Ubuntu : 나눔고딕


Android 4.4 이전 - Droid Sans fallback (고딕)

Android 4.4 이후 - 나눔고딕

iOS 5.x 이하 - 애플 고딕

iOS 6.x  - 애플 산돌 고딕 네오 (일반체와 볼드체)

iOS 7.x  - 애플 산돌 고딕 네오 (100 ~ 900)

윈도우 폰 - 마이크로소프트 네오 고딕



폰트 적용 방법

각각의 사용자를 위해서 font-family에 해당 운영체제에서 지원하는 폰트를 넣어준다.


(1) 윈도우 사용자를 위해서 맑은 고딕을 넣되, 영문판/다국어 윈도우 지원을 위해서 malgun gothic이라는 영문 폰트명도 추가 해준다. 


(2) OS X에 맞춰서 Apple SD 산돌고딕 Neo를 추가해주고, 역시나 다국어 지원을 위해 영문 폰트명인 AppleGothicNeoSD도 넣어준다. 기본적으로 iOS 기기는 한글 글꼴명을 인식하지 않기 떄문에 영문 글꼴명은 필수로 넣어줘야 한다. 애플 고딕 같은 경우 구버전 운영체제에서는 지원 폰트가 없는 한글은 무조건 애플 고딕으로 표기가 되기 때문에 따로 넣을 필요 없다. 혹시나 AppleGothic을 기본 폰트로 스킨에 넣을 경우에는 제거 하는 것을 권장한다. 왜냐면 OS X 10.9 이상에서는 네오고딕이 Systemwide로 기본 적용 되나 만약 font-family에 AppleGothic이 있으면 해당 폰트가 적용되어버리기 때문에 가독성에 심각한 영향을 준다. 


(3) 윈도폰을 위해서 네오고딕을 추가해준다. 네오고딕의 폰트명은 Microsoft NeoGothic 이다. 윈도폰에는 맑은 고딕도 탑재되어 있기 때문에 크게 문제시 되지 않으나 일단 윈도폰이 네오고딕에 최적화 되어있기에 전용 글꼴에 맞춰주는 것도 나쁘지 않다.


(4) 안드로이드 폰을 위해서 Droid sans를 추가해준다. 사실 font-family 맨 마지막에 sans-serif를 적용하면 이게 적용되기는 하나, 제조사 커스텀 된 폰에는 어떻게 뜰지 모르기 때문에 가장 표준적인 Droid Sans를 불러오도록 하는 것이 일관성있고 좋다.


font-family: '맑은 고딕', 'malgun gothic', 'AppleGothicNeoSD', 'Apple SD 산돌고딕 Neo', 'Microsoft NeoGothic',  'Droid sans', sans-serif;

- 원본 출처 : http://est0que.tistory.com/2116



위키 : 맑은 고딕

이전까지 윈도우의 기본 한글 글꼴은 굴림이었으나, 마이크로소프트 윈도우 비스타 운영 체제부터 기본 글꼴을 맑은 고딕으로 바꾸었다. 따라서 약 12년 만에 한국어 윈도우 기본 글꼴이 바뀐 것이다. 마이크로소프트 오피스 2007, 2010, 2013 그리고 2016과 윈도우 비스타, 7, 윈도우 서버 2008, 윈도우 8, 8.1, 윈도우 10에 포함되어 있다. 윈도우 8용(버전 6.22)과 윈도우 8.1용(버전 6.50)은 옛 한글 완성자를 표시할 수 있다.

윈도우 10에서 '맑은 고딕 Semilight' 글꼴이 추가되었다.

- 원본 출처 : https://ko.wikipedia.org/wiki/맑은_고딕



나무위키 : 맑은 고딕

개요

Windows Vista부터 탑재된 한국어 기본 글꼴. Windows XP의 경우 Microsoft Office 2007이나 2010을 설치하면 탑재되며, Windows Vista 이후로는 어떤 언어판을 깔아도 다국어 폰트가 기본적으로 설치되므로 어떤 버전을 깔든지 상관없이 어디서나 이용할 수 있다. (기존의 바탕, 굴림, 돋움 등도 함께 설치된다.) 나무위키의 기본 채택 글꼴 중 하나이기도 하다.


Microsoft Windows 기본 글꼴이 되기까지

Windows XP 까지 기본 한글 글꼴로 사용되었던 굴림과 바탕의 경우 한양정보통신이 제작했던 것이지만, 90년대 초반에 개발된 이후 외형적으로 큰 발전이 없어 시대에 뒤떨어진 글꼴이었기 때문에(특히 웹디자이너들 사이에서) 꽤 많은 불만이 존재하고 있는 상황이었다.

MS는 고해상도 디스플레이 기기의 보급과, 자사의 폰트 안티에일리어싱 기능인 클리어타입의 보급에 힘입어 윈도우즈 비스타를 내놓으면서 그동안 신경을 안 쓰고 방치하고 있었던 비로마자 언어권의 기본 폰트를 대폭 개선하기로 했고, 맑은 고딕은 그 일환으로서 산돌커뮤니케이션에서 개발되어 Windows Vista의 발매와 함께 기존에 굴림체가 차지하고 있던 기본 UI 글꼴의 자리를 대체하였다. 2001년 한국마이크로소프트에서 한글 서체 개발을 위해 4개 업체를 후보에 올려 검토한 결과 최종적으로 산돌커뮤니케이션이 우선 협상 대상자로 선정되었으나, 한국마이크로소프트에서 예산이 책정되지 않았다는 이유로 Windows를 위한 새로운 한글 서체 개발을 한 차례 중단시켰다.

이듬해 한국마이크로소프트 담당 직원이 산돌커뮤니케이션 석금호 대표에게 연락해 미국 본사에 가서 그들을 직접 설득해달라는 요청을 했고, 석금호 대표는 미국 시애틀 마이크로소프트 본사를 찾아가 3일간 타이포그래피팀, 디스플레이기술팀, 힌팅팀과 차례로 미팅과 토론을 벌였다. 원래 마이크로소프트가 한글 서체 개발을 포기한 이유는 예산 때문이 아니라 한국의 폰트 회사가 자신들이 인정할 만한 타이포그래피 지식을 보유했는지에 대한 의심 때문이었으며, 3일간의 미팅을 통해 이 점이 해소되었고 곧바로 Windows를 위한 새로운 한글 서체 개발 예산 책정이 이루어졌다. 이후 산돌커뮤니케이션을 통해 2년에 걸쳐 15명의 디자이너가 개발이 투입됐으며, 마이크로소프트 본사의 엄격한 품질 검사를 모두 통과하고 2004년 비스타에 탑재되었다.

참고로 영어판이나 유럽판의 경우 기본 서체가 Segoe UI이다. 중국어는 간체자판은 Microsoft YaHei, 번체자판은 Microsoft JhengHei이며, 일본어판은 Windows 8.1 까지 Meiryo UI를 쓰다가 Windows 10에서 Yu Gothic으로 바뀌었다.

- 원본 출처 : https://namu.wiki/w/맑은%20고딕


※ 나무위키 | macOS/버전 : https://namu.wiki/w/macOS/버전

Posted by cpu21
WordPress/Plugin2018. 11. 29. 09:26

KBoard (케이보드)

Cosmosfarm | KBoard : https://www.cosmosfarm.com/products/kboard

WordPress Plugins Page | KBoard 위젯 by 코스모스팜 - Cosmosfarm : https://wordpress.org/plugins/kboard-widget/

코스모스팜 블로그 : https://blog.cosmosfarm.com/

KBoard GitHub : https://github.com/cosmosfarm/KBoard-wordpress-plugin


Mang Board (망보드)

(주)홈토리 | Mang Board : https://www.mangboard.com/

WordPress Plugins Page | Mang Board WP by Hometory : https://wordpress.org/plugins/mangboard/


단비스토어의 RainBoard (레인보드)

https://danbistore.com/item/rainboard/


Kingkong Board (킹콩보드)

WordPress Plugins Page | Kingkong Board by Bryan Lee : https://wordpress.org/plugins/kingkong-board/ (v2.1.0.2 이후 개발 및 업데이트 중단)

주식회사 슈퍼로켓 | 킹콩보드 : http://superrocket.io/project/킹콩보드/


Hana-Board (하나보드)

WordPress Plugins Page - Hana-Board 하나보드 워드프레스 게시판 by 하나워드프레스 : https://wordpress.org/plugins/hana-board/ (v1.5.0 이후 개발 및 업데이트 중단)


MH Board

WordPress Plugins Page | MH Board by MinHyeong Lim : https://wordpress.org/plugins/mh-board/ (v1.3.2.1 이후 개발 및 업데이트 중단)

썀쳐넷 | MH Board : http://ssamture.net/mh-board


그누프레스 (GNUPress)

- by SIR Soft
- Version: 0.2.9
- Last updated: 2 년 ago
- Active installations: 500+
- WordPress Version: 4.0 or higher
- Tested up to: 4.5.13
- WordPress Plugins Page | GNUPress by SIR Soft : https://ko.wordpress.org/plugins/gnupress/
- SIR 홈페이지 | 그누프레스 : https://sir.kr/main/gnupress/

Posted by cpu21
HTML & Publishing2018. 11. 28. 19:11

Vimeo : Embedding background videos

https://help.vimeo.com/hc/en-us/articles/115011183028-Embedding-background-videos

If you are a Plus, PRO, Business, or Premium member, you can remove the play/pause button on your embedded background videos. To do this, add the following parameter to the end of the player URL in your embed code : background=1


Example Embed Code:

<iframe src="https://player.vimeo.com/video/76979871?background=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>


Adding this parameter will have the following effect: 

1. All player toggles and elements will be turned off (including the play/pause button!)

2. The video will automatically loop.

3. The video will be set to autoplay.

4. The video will be muted.


If you would like your video to play with sound, you can also add the muted=0 parameter to your embed code. For example: 

<iframe src="https://player.vimeo.com/video/76979871?background=1&muted=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>


Chrome and Safari have new autoplay restrictions in place that will restrict background videos that are set to automatically play with sound. Muted background videos will not be affected. For more about this, please see the Autoplay Restrictions section of this article. 


Please note that using the background parameter will override any embed settings currently associated with the video. However, those embed settings are not changed. If the parameter is removed, the existing embed settings will take affect once more. 


 


Vimeo : Autoplaying and looping embedded videos

https://help.vimeo.com/hc/en-us/articles/115004485728-Autoplaying-and-looping-embedded-videos


If you’d like your embedded video to autoplay or loop, go to the video you'd like to embed and click the "Share" button in the video player. In the window that opens, click the "Show options" link, and check the corresponding boxes next to "Loop this video," "Autoplay this video," or both. You can then copy the embed code.


You can also do this manually by adding the following parameters into your embed code:

loop=1

autoplay=1


If you have more than one video autoplaying on a particular page, you will also need to include this parameter:

autopause=0


So, for example, if you were embedding two autoplay, looping, videos on a page, the embed code for each would look like this:

<iframe src="https://player.vimeo.com/video/12345?autoplay=1&loop=1&autopause=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>



Autoplay Restrictions

If the autoplay parameter is present, our player will attempt to automatically begin playback. However, please note that some browsers specifically block autoplay. In these cases, your video will revert back to the original thumbnail and controls, requiring viewers to select play to start playback.


Autoplay is currently restricted in the following environments:

Safari version 11+ (Desktop)
- Documentation: https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/
- Policy:  Autoplaying videos must be muted. Viewers can choose to block or allow unmuted autoplay for specific domains on their setup (see here)


Chrome version 66+ (Desktop/Android)
- Documentation: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
- Policy: Autoplaying videos must be muted. Videos that are frequently visited by the viewer are permitted to autoplay with sound (based on Google’s scoring system)


iOS (Safari, other mobile browsers, apps)
- Documentation:https://webkit.org/blog/6784/new-video-policies-for-ios/
- Policy: Autoplaying videos must be muted.


Firefox (Desktop)
- Firefox does not enforce any autoplay limitations; however, viewers can manually disable autoplay by disabling the preference media.autoplay.true. On setups where this setting is disabled, the viewer will be required to press play to start playback.


Workarounds

There is no way to stop these autoplay restrictions; however, you can mute your video to ensure autoplay is always honored. Just add one of the following parameters to the end of the player URL in your embed code:  


?background=1: This parameter automatically disables all elements in the player (play bar, buttons, etc), autoplays, loops, and mutes your video on load. Please note: the background parameter is only supported for videos hosted by paid members. Learn more here.


?muted=1 This parameter will automatically mute your video on load. Once your video plays, viewers can manually un-mute by clicking on the volume bar within the player.


💡Important: Both of these parameters will force your video to load as muted in all browsers. Videos without audio tracks (or audio tracks without sound) will not be considered muted by browsers. In order to bypass autoplay restrictions, you must use one the embed parameters above. 


If you are experiencing an issue, or have any questions, please contact us.




Chrome's autoplay policies

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes


WEBKIT/SAFARI Auto-Play Policy:

https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/


FIREFOX Auto-Play Improvements:

https://www.ghacks.net/2018/09/21/firefox-improved-autoplay-blocking/

'HTML & Publishing' 카테고리의 다른 글

도메인 고정포워딩과 유동포워딩 태그  (0) 2019.01.26
디바이스별 해상도  (0) 2018.11.28
Vimeo/YouTube Parameters  (0) 2018.08.30
option 링크 걸기  (0) 2018.08.24
구글 맵 예제  (0) 2018.07.22
Posted by cpu21
HTML & Publishing2018. 11. 28. 10:38

Device Resolution


Laptop : https://blog.naver.com/kyotaroc/220297015290

1366*768 / 1600*900 / 1920*1080


Smartphone : https://www.popco.net/zboard/view.php?id=popco_vote&no=538




16:9

16:9 (1.77:1) (16:9 = 42:32)는 너비 16, 높이 9의 비율을 갖는 가로세로비이다. 2009년 이후로, 16:9는 텔레비전과 컴퓨터 모니터의 가장 일반적인 화면 비율일 뿐만 아니라 HDTV, 풀 HD, 디지털 텔레비전, 아날로그 와이드 스크린 텔레비전의 국제 표준이다.


16:9 화면 비율의 일반적인 해상도는 다음과 같다.

너비높이표준
640360
800450
864486
960540qHD
1024576
1152648
1280720HD
1366768
1600900HD+
19201080Full HD
20481152
25601440QHD
28801620
32001800
384021604K UHDTV
40962304
501228805K
768043208K UHDTV
15360864016K

- 출처 : 위키 https://ko.wikipedia.org/wiki/16:9

'HTML & Publishing' 카테고리의 다른 글

도메인 고정포워딩과 유동포워딩 태그  (0) 2019.01.26
Vimeo/Browser - autoplay, mute 관련  (0) 2018.11.28
Vimeo/YouTube Parameters  (0) 2018.08.30
option 링크 걸기  (0) 2018.08.24
구글 맵 예제  (0) 2018.07.22
Posted by cpu21
WordPress/Plugin2018. 11. 28. 10:06

Health Check & Troubleshooting


- by The WordPress.org community

- Version: 1.2.1

- Last updated: 4 months ago

- Active installations: 60,000+

- WordPress Version: 4.0 or higher

- Tested up to: 4.9.8
- WordPress.org Plugin Page / Plugin Homepage : https://wordpress.org/plugins/health-check/

- WordPress.org support team handbook page about this plugin : https://make.wordpress.org/support/handbook/appendix/troubleshooting-using-the-health-check/

- Screenshots






Posted by cpu21
WordPress/Plugin2018. 11. 28. 09:59

WooCommerce PayPal Powered by Braintree Gateway

- Version 2.2.0
- by WooCommerce
- Introduction : https://woocommerce.com/products/woocommerce-gateway-paypal-powered-by-braintree/
- Document : https://docs.woocommerce.com/document/woocommerce-gateway-paypal-powered-by-braintree/



Braintree

FAQ : International : https://www.braintreepayments.com/faq#international
FAQ : General | Where in the world is Braintree available? : https://www.braintreepayments.com/faq#general
Setup Guide : https://articles.braintreepayments.com/guides/payment-methods/paypal/setup-guide
Important Gateway Credentials (Environment - sandbox or production / Public key / Private key / Merchant ID) : https://articles.braintreepayments.com/control-panel/important-gateway-credentials

Production Control Panel : https://www.braintreegateway.com/login
Creating a production account : https://signups.braintreepayments.com/

Sandbox Control Panel : https://sandbox.braintreegateway.com/login



PayPal powered by Braintree - WooCommerce Guided Tour
- 게시자 : WooCommerce
- 게시일 : 2016. 11. 3


Posted by cpu21

…에서 로그아웃 하려고 합니다. 로그아웃하시겠습니까?
Are you sure you want to log out? Confirm and log out : Message Disable


https://kopress.kr/topic/로그아웃시-확인창이-뜨는-문제/

https://www.thewordcracker.com/intermediate/remove-wordpress-logout-confirmation-message/

https://iconicwp.com/blog/bypass-are-you-sure-you-want-to-log-out-message-in-woocommerce/

Posted by cpu21

How To Auto Redirect Users After Login In WordPress

function login_redirect( $redirect_to, $request, $user ){

    return home_url('news.php');

}

add_filter( 'login_redirect', 'login_redirect', 10, 3 );

https://stackoverflow.com/questions/8127453/redirect-after-login-on-wordpress

https://www.thewordcracker.com/scribblings/redirection-to-a-specific-page-after-login-and-logout-in-wordpress/



How To Auto Redirect Users After Logout In WordPress

add_action('wp_logout','auto_redirect_after_logout');

function auto_redirect_after_logout(){

  wp_redirect( home_url() );

  exit();

}

https://trickspanda.com/auto-redirect-users-logout-wordpress/



Login / Logout Redirect Plugins

Peter's Login Redirect By Peter Keung : 

https://wordpress.org/plugins/peters-login-redirect/

https://www.thewordcracker.com/intermediate/wordpress-login-and-logout-redirect-url-peters-login-redirect%EF%BB%BF-plugin/


Login and Logout Redirect By Swapnil V. Patil : https://wordpress.org/plugins/login-and-logout-redirect/

Posted by cpu21
WordPress/Plugin2018. 11. 3. 18:26

Theme My Login

- WP Plugin Site : https://ko.wordpress.org/plugins/theme-my-login/

- By Theme My Login

- Version : 7.0.11

- Referances :

https://www.thewordcracker.com/basic/워드프레스-로그인-플러그인-theme-my-login/

https://wpguide.usefulparadigm.com/posts/302



Login / Logout Plugins

Login-Logout By webvitaly : https://wordpress.org/plugins/login-logout/

My Login Logout Plugin By Nagarjun Sonti : https://wordpress.org/plugins/my-loginlogout/

WooCommerce Menu Extension By August Infotech : https://wordpress.org/plugins/woocommerce-menu-extension/

Modal Login Register Forgotten Wordpress Plugin (USD 20) : https://codecanyon.net/item/modal-login-register-forgotten-wordpress-plugin/5433514?ref=elohimguy

- Add modal login, register, forgotten password forms to your WordPress site, customise new user registration email, protect registration with Google reCAPTCHA and more.



Wordpress 로그인 및 회원가입 관련 공식 주소

로그인: /wp-login.php

Register new users (who've arrived at this form by clicking a Register) : /wp-login.php?action=register

Email a password to a registered user (by clicking the Lost your password?) : /wp-login.php?action=lostpassword

로그아웃: /wp-login.php?action=logout

※ 참고 : https://wpguide.usefulparadigm.com/posts/194

WordPress Codex | Customizing the Login Form : https://codex.wordpress.org/Customizing_the_Login_Form



User Roles 관련 플러그인 / Documents

Nav Menu Roles By Kathy Darling : 

Plugin Site : https://wordpress.org/plugins/nav-menu-roles/

로그인하면 로그인 메뉴가 로그아웃 메뉴로 바뀌도록 하기(워드프레스) with Nav Menu Roles : https://www.thewordcracker.com/basic/how-to-change-login-to-logout-when-loggged-in/

워드프레스 메뉴에 로그인/로그아웃 메뉴 항목을 추가하는 방법 with function : https://www.thewordcracker.com/scribblings/how-to-add-login-and-logout-menu-items-to-menu-in-wordpress/


If Menu – Visibility control for Menu Items By Layered : https://wordpress.org/plugins/if-menu/



WP-Members Membership Plugin

WP-Members Membership Plugin By Chad Butler : https://wordpress.org/plugins/wp-members/

WP-Members로 회원제 사이트 만들기 : https://wpguide.usefulparadigm.com/posts/577

[워드프레스] WP-Members에서 새로운 사용자 필드 및 이용약관 추가하기 : https://www.thewordcracker.com/basic/how-to-change-fields-in-wp-members-in-wordpress/

[WP-Members] 권장 워드프레스 설정 : https://www.thewordcracker.com/basic/recommended-wordpress-settings/



Ultimate Member

Ultimate Member - User Profile & Membership Plugin By Ultimate Member : https://ko.wordpress.org/plugins/ultimate-member/



Paid Memberships Pro

https://www.paidmembershipspro.com/

Posted by cpu21
jQuery2018. 11. 2. 10:38

fancybox

http://fancyapps.com/fancybox/3/

http://fancybox.net/


jQuery YouTube Popup Player Plugin

http://lab.abhinayrathore.com/jquery_youtube/


Top 3 jQuery YouTube PopUp Player Plugins

https://jqueryhouse.com/top-3-jquery-youtube-popup-player-plugins/

1. jQuery YouTub Popup Player Plugin : http://lab.abhinayrathore.com/jquery_youtube/

2. YouTube Popup jQuery Plugin : http://www.jqueryrain.com/2016/03/youtube-popup-jquery-plugin/

3. jQuery Video Lightning : https://www.jqueryscript.net/lightbox/jQuery-Lightbox-Plugin-For-Youtube-Videos-Video-Lightning.html


Magnific Popup

http://dimsemenov.com/plugins/magnific-popup/


modal-video.js - jQuery Modal Video Plugin

https://appleple.github.io/modal-video/


jQuery Image and Video LightBox Plugin

https://html5box.com/html5lightbox/


Simple Responsive Youtube Video Modal Plugin With jQuery - YU2FVL

https://www.jqueryscript.net/other/Simple-Responsive-Youtube-Video-Modal-Plugin-With-jQuery-YU2FVL.html


Minimal Youtube/Vimeo Modal Plugin For jQuery - modal-video

https://www.jqueryscript.net/lightbox/Youtube-Vimeo-Modal-Plugin-jQuery.html


VenoBox

http://veno.es/venobox/

Posted by cpu21
jQuery2018. 10. 14. 19:27

[javascript] 파일첨부시 특정 파일확장자만 선택하기 및 input type="file"의 초기화


(1) 파일첨부시 특정 파일확장자만 선택하게 하기

- 출처 : Posted on 2015-02-17 by 문이 : http://blog.munilive.com/input-file-type-accept-attribute/


<input type=”file”> 태그에 accept 라는 속성으로 사용자가 첨부하려는 파일을 특정지을 수 있다.


 

- 사용방법 : input 태그에 accept 속성을 부여
- 속성의 값으로 사용할 수 있는 방법 : 특정 확장자를 지정하는 방법과 미디어 타입을 지정하는 방법 또는 audio/*, video/*, image/* 형식으로 정의

A) 특정한 확장자로 지정 : .gif, .jpg, .png 와 같이 나열 하면 된다. 구분은 ,(콤마)

<input type="file" accept=".gif, .jpg, .png">


B) 

<input type="file" accept="audio/*"> : 모든 오디오 파일을 보여줌

<input type="file" accept="video/*"> : 모든 비디오 파일을 보여줌

<input type="file" accept="image/*"> : 모든 이미지 파일을 보여줌


C) 미디어 타입으로 지정하는 방법 :

<input type="file" accept="image/gif, image/jpeg, image/png">

미디어 파일 타입은 http://www.iana.org/assignments/media-types/media-types.xhtml을 참고


- 해당 속성은 IE10 이상 부터 사용 가능

- 예제 확인 : http://blog.munilive.com/ex/html/input_type_file_accept_attribute.html




(2) input type = "file"에 이미지만 첨부 가능하도록 하는 스크립트

input type file에 이미지만 첨부 가능하도록 하는 스크립트

- 출처 : https://ljmgood123.blog.me/220868249390

- 작성자 : MDB

function chk_file_type(obj) {

var file_kind = obj.value.lastIndexOf('.');

var file_name = obj.value.substring(file_kind+1,obj.length);

var file_type = file_name.toLowerCase();

var check_file_type=new Array();

check_file_type=['jpg','gif','png','jpeg','bmp','tif'];


if(check_file_type.indexOf(file_type)==-1) {

alert('Only image file can be uploaded.');

var parent_Obj=obj.parentNode;

var node=parent_Obj.replaceChild(obj.cloneNode(true),obj);


document.getElementById("wfb-field-219958876").value = "";    //초기화를 위한 추가 코드

document.getElementById("wfb-field-219958876").select();        //초기화를 위한 추가 코드

document.selection.clear();                                                //일부 브라우저 미지원

return false;

}

}

<input type='file' name='files' accept='image/jpeg,image/gif,image/png' onchange='chk_file_type(this)'>



파일첨부에 이미지만 첨부할 수 있도록 처리 input file

- 출처 : http://sqlplus.tistory.com/entry/파일첨부에-이미지만-첨부할-수-있도록-처리-input-file

function fileTypeCheck(obj) {

pathpoint = obj.value.lastIndexOf('.');

filepoint = obj.value.substring(pathpoint+1,obj.length);

filetype = filepoint.toLowerCase();

if(filetype=='jpg' || filetype=='gif' || filetype=='png' || filetype=='jpeg' || filetype=='bmp') {

// 정상적인 이미지 확장자 파일인 경우

} else {

alert('Only image file can be uploaded!');

parentObj  = obj.parentNode

node = parentObj.replaceChild(obj.cloneNode(true),obj);

return false;

}

}

<input type="file" name="filename" onchange="fileTypeCheck(this)" accept="image/gif, image/jpeg, image/png"/>




(3) input type="file"의 초기화

selection.clear() 참조 : ie11 에서 document.selection.clear()가 안먹히네요.


selection.clear() 참조 : [HTML] input type="file"에서 찾아보기 버튼 바꾸기

보안문제로 인해 input box는 script가 값을 바꿔버리는 것을 허용하지 않음
다른거에 하던 식으로 document.getElementById("file").value = ""; 는 작동 안됨
대신에 아래와 같이 사용

document.getElementById("file").select();

//document.execCommand('Delete');   

document.selection.clear();


위와 같은 자바스크립트 코드를 이용하면 해당 인풋파일의 값을 지워줄 수 있다.
2번줄에 주석처리한 부분은 3번줄 대신 2번줄을 사용해도 된다. 둘줄 하나로 하면 된다.
물론 이 소스도 돌아가지 않는다. 위에 말한대로 보안문제 때문에 submit()할 때 문제가 생긴다.

Posted by cpu21
WordPress/Plugin2018. 10. 14. 19:21

WooCommerce Stripe Payment Gateway

By WooCommerce

- Wordpress plugin page : https://ko.wordpress.org/plugins/woocommerce-gateway-stripe/

- Woocommerce.com page : https://woocommerce.com/products/stripe/

- Version: 4.1.10

- Last updated: 4 주 ago

- Active installations: 400,000+

- WordPress Version: 4.4 or higher

- Tested up to: 4.9.8

- PHP Version: 5.6 or higher

- Description : Accept Visa, MasterCard, American Express, Discover, JCB, Diners Club, SEPA, Sofort, iDeal, Giropay, Alipay and more directly on your store with the Stripe payment gateway for WooCommerce, including Apple Pay for mobile and desktop.


- Setup videos

https://www.youtube.com/watch?v=pgru-VoINoY

https://www.youtube.com/watch?v=5rMDGdkmSGU



Posted by cpu21
WordPress/Plugin2018. 10. 14. 19:15

10+ Best Email Management Plugins for WooCommerce

- By Fran SanchezMay 16, 2018

- WooCommerce Setup


1. SIP Advanced Email Rules for WooCommerce

2. Woo Email Control

3. YITH WooCommerce Email Templates

4. Woo Custom Emails

5. Adding a Custom WooCommerce Email

6. Follow Ups

7. Advanced Notifications

8. WooCommerce Pretty Emails

9. Email Customizer for WooCommerce

10. WooCommerce Email Center

11. WooCommerce Advanced Email Customizer



URL : https://shopitpress.com/blog/woocommerce-setup/10-best-email-management-plugins-woocommerce/

Posted by cpu21
WordPress/Plugin2018. 10. 14. 19:03

WP Mail SMTP by WPForms

- by Von WPForms

- Download : wp-mail-smtp.zip

- Plugin Page : https://de.wordpress.org/plugins/wp-mail-smtp/

- Description : WORDPRESS MAIL SMTP PLUGIN

Having problems with your WordPress site not sending emails? You’re not alone. Over 900,000 websites use WP Mail SMTP to fix their email deliverability issues.
WP Mail SMTP fixes your email deliverability by reconfiguring the wp_mail() PHP function to use a proper SMTP provider.

- Version: 1.3.3

- Last updated: before 3 months

- Active installations: 1+ millions

- WordPress version: 3.6 or higher

- Tested until: 4.9.8

- PHP version: 5.3 or higher

- Screenshot :

WP Mail SMTP Settings page




SMTP mailer

- by naa986

- Download : smtp-mailer.zip

- Plugin Page : https://de.wordpress.org/plugins/smtp-mailer/

- Description : SMTP Mailer plugin allows you to configure a mail server which handles all outgoing email from your website. It takes control of the wp_mail function and use SMTP instead.

- Version: 1.0.5

- Last updated: ago 8 months

- Active installations: 30,000+

- WordPress version: 4.8 or higher

- Tested until: 4.9.8






Post SMTP Mailer/Email Log

- By Jason Hendriks, Yehuda Hassine

- Description : Now under new maintenance, no need to search for another SMTP plugin anymore.
Post SMTP is a next-generation WP Mail SMTP plugin, that assists in the delivery of email generated by your WordPress site. Post SMTP is the first and only plugin to support the latest security standards. With OAuth 2.0, there is no need to store your email passsword in the WordPress database where it might be found.
The Connectivity Test and intelligent Setup Wizard scan your SMTP server to detect firewall blocks and eliminate configuration mistakes. The built-in Email Log is an invaluable resource for diagnosing problems with emails. Even hosts that block the standard SMTP ports, like GoDaddy or Bluehost, can’t stop your email as Post SMTP can deliver via HTTPS if it can’t use SMTP.
Post SMTP is not another WP Mail SMTP clone like WP Bank or Easy SMTP. It replaces the default WordPress SMTP library, PHPMailer, with the heavy-duty Zend_Mail. Never lose an email to PHP mail() again.
- Download : post-smtp.1.9.5.zip
- Version: 1.9.5
- Last updated: 2 weeks ago
- Active installations: 70,000+
- WordPress Version: 3.9 or higher
- Tested up to: 4.9.9


Posted by cpu21
WordPress/Plugin2018. 10. 8. 01:38

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

- Location : Settings > SiteOrigin Page Builder > Layout Tab




Posted by cpu21
WordPress/Plugin2018. 10. 8. 01:29

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


Posted by cpu21