Không thể tham chiếu biểu định kiểu CSS trong email dựa trên HTML, như bạn thường làm trong ứng dụng dựa trên web bằng cách sử dụng.

setFrom("<>", "Example User");
$email->setSubject("Email");
$email->addTo("<>", "Example User");
$emailBody = <<





This is big and green
This is small and purple


EOF;
$email->addContent( "text/html", $emailBody);
$sendgrid = new \SendGrid('<>);
try {
$response = $sendgrid->send($email);
print $response->statusCode() . "\n";
print_r($response->headers());
print $response->body() . "\n";
} catch (Exception $e) {
echo 'Caught exception: '. $e->getMessage() ."\n";
}

Tùy thuộc vào email của bạn, điều này có thể khá rắc rối. May mắn thay, có một cách để khắc phục hạn chế này, bạn sẽ học được cách này trong hướng dẫn này

điều kiện tiên quyết

Để làm theo cùng với bài viết này, bạn sẽ cần những điều sau đây

• Kiến thức cơ bản về PHP
• PHP7. 4 (lý tưởng là phiên bản 8), với phần mở rộng zip
• Trình soạn nhạc được cài đặt trên toàn cầu
• Tài khoản SendGrid

Sử dụng SendGrid với Composer

Để sử dụng SendGrid để gửi email bằng PHP, bạn cần cài đặt Thư viện API SendGrid PHP. Làm điều này bằng cách chạy lệnh dưới đây

composer require sendgrid/sendgrid

Truy xuất Khóa API SendGrid và danh tính Người gửi hợp lệ

Bạn sẽ cần khóa API SendGrid và danh tính người gửi hợp lệ để gửi email qua PHP bằng SendGrid

Trước tiên, để truy xuất khóa API SendGrid của bạn

1. Đăng nhập vào tài khoản SendGrid của bạn
2. Từ menu bên trái, nhấp vào Cài đặt, sau đó nhấp vào Khóa API
3. Nhấp vào nút Tạo khóa API ở trên cùng bên phải của trang để tạo khóa API mới. Một màn hình mới sẽ xuất hiện
4. Bên trong trường Tên khóa API, hãy nhập tên cho khóa API của bạn
5. Trong phần Quyền của khóa API, chọn Quyền truy cập đầy đủ hoặc Quyền truy cập bị hạn chế. Nếu bạn quyết định hạn chế quyền truy cập, hãy đảm bảo rằng khóa có quyền truy cập vào tùy chọn Gửi thư
6. Nhấp vào nút Tạo và Xem. Bạn sẽ được cung cấp khóa API SendGrid của mình
7. Lưu ý khóa API SendGrid mà bạn đã được cung cấp

Tạo danh tính người gửi đã được xác minh

Để làm điều đó, hãy đăng nhập vào tài khoản SendGrid của bạn, sau đó đi tới Cài đặt trong thanh điều hướng. Khi ở đó, nhấp vào Xác thực người gửi. Sau đó, tiến hành Xác minh một người gửi bằng cách chọn Bắt đầu trong Xác minh địa chỉ

Bạn sẽ được đưa đến trang Xác minh người gửi đơn. Trong phần Tạo người gửi đầu tiên của bạn, nhấp vào Tạo người gửi mới để tải phương thức biểu mẫu

Điền vào tất cả các trường trong phương thức biểu mẫu và sau đó nhấp vào Tạo

Trường biểu mẫu

• Từ tên. Đây là tên thân thiện với người dùng được hiển thị cho người nhận của bạn khi họ nhận được email của họ
• Từ địa chỉ email. Đây là địa chỉ email gửi email. SendGrid gửi email xác minh đến địa chỉ bạn nhập vào trường này. Nếu bạn không nhận được sau một thời gian ngắn, vui lòng quay lại cài đặt Người gửi và xác nhận rằng email "Từ" là một địa chỉ email hợp lệ
• Trả lời. Nếu người nhận trả lời email, thư trả lời sẽ chuyển đến địa chỉ email này
• Địa chỉ công ty, Thành phố, Tiểu bang, Mã Zip, Quốc gia. Địa chỉ doanh nghiệp của bạn
• Tên nick. Nhãn cho danh tính người gửi của bạn để giúp bạn xác định nó nhanh hơn sau này. Nhãn này không hiển thị với người nhận của bạn

Kiểm tra hộp thư đến của địa chỉ email mà bạn đã nhập và nhấp vào liên kết trong email để hoàn tất xác minh địa chỉ email Người gửi

Nếu vì bất kỳ lý do gì, bạn cần gửi lại email xác minh, hãy nhấp vào menu hành động trên trang Xác minh một người gửi và chọn Gửi lại xác minh. SendGrid sẽ gửi một email xác nhận mới đến địa chỉ bạn đang cố xác minh

Nếu bạn có miền được xác thực và địa chỉ email người gửi của bạn khớp chính xác với miền đó, danh tính người gửi của bạn sẽ được xác minh tự động

Bây giờ bạn sẽ thấy một trang xác nhận việc xác minh địa chỉ của bạn. Nhấp vào Quay lại Xác minh Người gửi Đơn để thêm nhiều địa chỉ hơn hoặc thực hiện bất kỳ thay đổi nào đối với địa chỉ bạn vừa xác minh

Tham khảo biểu định kiểu nội tuyến

Bây giờ bạn đã thiết lập xong mọi thứ, hạn chế không thể tham chiếu biểu định kiểu qua email HTML có thể được giải quyết bằng hàm file_get_contents(). Hàm này lấy nội dung của tệp và lưu trữ chúng trong một chuỗi

Trước khi tôi trình bày cách tham chiếu các biểu định kiểu CSS lớn bằng phương pháp này, để xem cách tham chiếu các biểu định kiểu trong email HTML hoạt động như thế nào, hãy tạo một tệp PHP mới, có tên là chỉ mục. php và dán mã bên dưới vào tệp

setFrom("<>", "Example User");
$email->setSubject("Email");
$email->addTo("<>", "Example User");
$emailBody = <<





This is big and green
This is small and purple


EOF;
$email->addContent( "text/html", $emailBody); 
$sendgrid = new \SendGrid('<>);
try {
$response = $sendgrid->send($email);
print $response->statusCode() . "\n";
print_r($response->headers());
print $response->body() . "\n";
} catch (Exception $e) {
echo 'Caught exception: '. $e->getMessage() ."\n";
}

Sau đó, thay thế các trình giữ chỗ,

setFrom("<>", "Example User");
$email->setSubject("Email");
$email->addTo("<>", "Example User");
$emailBody = <<





This is big and green
This is small and purple


EOF;
$email->addContent( "text/html", $emailBody); 
$sendgrid = new \SendGrid('<>);
try {
$response = $sendgrid->send($email);
print $response->statusCode() . "\n";
print_r($response->headers());
print $response->body() . "\n";
} catch (Exception $e) {
echo 'Caught exception: '. $e->getMessage() ."\n";
}

setFrom("<>", "Example User");
$email->setSubject("Email");
$email->addTo("<>", "Example User");
$emailBody = <<





This is big and green
This is small and purple


EOF;
$email->addContent( "text/html", $emailBody); 
$sendgrid = new \SendGrid('<>);
try {
$response = $sendgrid->send($email);
print $response->statusCode() . "\n";
print_r($response->headers());
print $response->body() . "\n";
} catch (Exception $e) {
echo 'Caught exception: '. $e->getMessage() ."\n";
}

setFrom("<>", "Example User");
$email->setSubject("Email");
$email->addTo("<>", "Example User");
$emailBody = <<





This is big and green
This is small and purple


EOF;
$email->addContent( "text/html", $emailBody); 
$sendgrid = new \SendGrid('<>);
try {
$response = $sendgrid->send($email);
print $response->statusCode() . "\n";
print_r($response->headers());
print $response->body() . "\n";
} catch (Exception $e) {
echo 'Caught exception: '. $e->getMessage() ."\n";
}

Tập lệnh sẽ gửi một email có nội dung “Đây là lớn và có màu xanh lục” và “Đây là nhỏ và có màu tím” từ email người gửi đã xác minh của bạn đến địa chỉ email bạn sử dụng để kiểm tra

Khi tập lệnh hoàn tất, hãy thực thi nó bằng cách chạy lệnh bên dưới

php index.php

Email gửi đi sẽ có dạng như hình bên dưới

Tham khảo Biểu định kiểu cục bộ

Để tham chiếu CSS được sử dụng trong ví dụ trên thông qua biểu định kiểu trên cùng một máy chủ, trước tiên hãy tạo một tệp CSS, được gọi là kiểu. css. Sau đó, mở tệp và dán CSS bên dưới vào tệp

.big {
    font-size: 40px;
    color: green;
}

.small {
    font-size: 20px;
    color: purple;
}

Tiếp theo, sử dụng hàm

setFrom("<>", "Example User");
$email->setSubject("Email");
$email->addTo("<>", "Example User");
$emailBody = <<





This is big and green
This is small and purple


EOF;
$email->addContent( "text/html", $emailBody); 
$sendgrid = new \SendGrid('<>);
try {
$response = $sendgrid->send($email);
print $response->statusCode() . "\n";
print_r($response->headers());
print $response->body() . "\n";
} catch (Exception $e) {
echo 'Caught exception: '. $e->getMessage() ."\n";
}

setFrom("[email protected]", "Example User");
$email->setSubject("E main");
$email->addTo("[email protected]", "Example User");
$content = file_get_contents("style.css");
$emailBody = <<




This is big and green
This is small and purple


EOF;
$email->addContent("text/html", $emailBody); 
$sendgrid = new \SendGrid('your API Key');
try {
$response = $sendgrid->send($email);
print $response->statusCode() . "\n";
print_r($response->headers());
print $response->body() . "\n";
} catch (Exception $e) {
echo 'Caught exception: '. $e->getMessage() ."\n";
}

Như bạn có thể thấy, để sử dụng tệp CSS trong HTML của email, bạn cần tìm nạp nội dung của nó, lưu trữ chúng trong một chuỗi và hiển thị bên trong thẻ

setFrom("<>", "Example User");
$email->setSubject("Email");
$email->addTo("<>", "Example User");
$emailBody = <<





This is big and green
This is small and purple


EOF;
$email->addContent( "text/html", $emailBody); 
$sendgrid = new \SendGrid('<>);
try {
$response = $sendgrid->send($email);
print $response->statusCode() . "\n";
print_r($response->headers());
print $response->body() . "\n";
} catch (Exception $e) {
echo 'Caught exception: '. $e->getMessage() ."\n";
}

Nếu bạn chạy tập lệnh PHP ở trên, bạn sẽ thấy rằng nó đã gửi thành công một email có chứa định dạng HTML, bạn có thể xem ví dụ bên dưới

Điều này thật tuyệt, nhưng còn các bảng định kiểu lớn thì sao? . Đây là CSS sẽ được sử dụng theo phong cách. css cho ví dụ này

h1 {
    font-size: 35px;
    background: mediumseagreen;
    color: white;
    border-radius: 10px;
    margin: 1% 1% 1% 1%;
    text-align: center;
}

.cont {
    width: 90%;
    padding: 10px;
    border: 2px solid salmon;
    border-radius: 10px;
    background: navajowhite;
}

.info {
    font-size: 25px;
    background: royalblue;
    color: white;
    border-radius: 10px;
    margin: 1% 1% 1% 1%;
    padding: 2% 2% 2% 2%;
    margin-top: 5%;
    text-align: center; 
}

Đây là cách tập lệnh PHP của bạn sẽ trông như thế nào nếu bạn muốn tham khảo và sử dụng CSS này trong email

setFrom("[email protected]", "Example User");
$email->setSubject("E main");
$email->addTo("[email protected]", "Example User");
$content = file_get_contents("style.css");
$emailBody = <<





Hi, Matt! Here's what's new...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus mauris a diam maecenas. Nibh cras pulvinar mattis nunc sed blandit libero volutpat. 
Ut placerat orci nulla pellentesque. Fermentum iaculis eu non diam phasellus vestibulum lorem sed. 
Quam id leo in vitae. Eu feugiat pretium nibh ipsum. Dui vivamus arcu felis bibendum ut tristique et egestas. Nisi porta lorem mollis aliquam ut porttitor leo a. 
Felis donec et odio pellentesque diam volutpat.

Auctor urna nunc id cursus metus aliquam. Tempor orci dapibus ultrices in iaculis nunc sed. Venenatis tellus in metus vulputate eu scelerisque. Consequat nisl vel pretium lectus quam id leo. 
Amet purus gravida quis blandit turpis cursus in hac. Ut venenatis tellus in metus. Augue eget arcu dictum varius. Placerat duis ultricies lacus sed turpis tincidunt id. Velit aliquet sagittis id consectetur purus ut faucibus. Pulvinar etiam non quam lacus. 
Tellus in hac habitasse platea dictumst vestibulum rhoncus est. Neque gravida in fermentum et. Urna porttitor rhoncus dolor purus non enim praesent. Amet justo donec enim diam vulputate. 
Enim praesent elementum facilisis leo vel. Non curabitur gravida arcu ac tortor dignissim convallis aenean et. Vel eros donec ac odio tempor orci dapibus.




EOF;

$email->addContent("text/html", $emailBody); 
$sendgrid = new \SendGrid('your API Key');
try {
$response = $sendgrid->send($email);
print $response->statusCode() . "\n";
print_r($response->headers());
print $response->body() . "\n";
} catch (Exception $e) {
echo 'Caught exception: '. $e->getMessage() ."\n";
}

Khi bạn thực thi tập lệnh PHP ở trên, bạn sẽ thấy rằng nó đã gửi thành công HTML theo kiểu email đến địa chỉ email của người nhận

Tham khảo bảng định kiểu từ xa

Nếu HTML của email của bạn yêu cầu CSS từ xa của các miền khác, bạn có thể sử dụng cùng chức năng

setFrom("<>", "Example User");
$email->setSubject("Email");
$email->addTo("<>", "Example User");
$emailBody = <<





This is big and green
This is small and purple


EOF;
$email->addContent( "text/html", $emailBody); 
$sendgrid = new \SendGrid('<>);
try {
$response = $sendgrid->send($email);
print $response->statusCode() . "\n";
print_r($response->headers());
print $response->body() . "\n";
} catch (Exception $e) {
echo 'Caught exception: '. $e->getMessage() ."\n";
}

file_get_contents("https://silly-shaw-96f0f7.netlify.app/ex1.css")

Biểu định kiểu bên ngoài này chứa CSS giống như đã được sử dụng trong ví dụ trước, vì vậy nếu bạn thực thi lại tập lệnh PHP, nhưng lần này sử dụng “https. // ngớ ngẩn-shaw-96f0f7. netlify. ứng dụng/ex1. css" thay vì "phong cách. css” bên trong hàm

setFrom("<>", "Example User");
$email->setSubject("Email");
$email->addTo("<>", "Example User");
$emailBody = <<





This is big and green
This is small and purple


EOF;
$email->addContent( "text/html", $emailBody); 
$sendgrid = new \SendGrid('<>);
try {
$response = $sendgrid->send($email);
print $response->statusCode() . "\n";
print_r($response->headers());
print $response->body() . "\n";
} catch (Exception $e) {
echo 'Caught exception: '. $e->getMessage() ."\n";
}

Biểu tượng tham chiếu

Các biểu tượng đôi khi được sử dụng trong email, tùy thuộc vào đối tượng và ngữ cảnh của bạn. Tuy nhiên, chúng chỉ được hỗ trợ bởi khoảng 35% ứng dụng email. Vì vậy, mặc dù cách tiếp cận sau đây sẽ không hoạt động trên tất cả các trình duyệt, nhưng để tham chiếu các biểu tượng trong CSS email, chúng ta có thể sử dụng cùng chức năng

setFrom("<>", "Example User");
$email->setSubject("Email");
$email->addTo("<>", "Example User");
$emailBody = <<





This is big and green
This is small and purple


EOF;
$email->addContent( "text/html", $emailBody); 
$sendgrid = new \SendGrid('<>);
try {
$response = $sendgrid->send($email);
print $response->statusCode() . "\n";
print_r($response->headers());
print $response->body() . "\n";
} catch (Exception $e) {
echo 'Caught exception: '. $e->getMessage() ."\n";
}

Đây là một ví dụ sử dụng Biểu tượng của Google

require 'vendor/autoload.php';
$email = new \SendGrid\Mail\Mail(); 
$email->setFrom("[email protected]", "Example User");
$email->setSubject("E main");
$email->addTo("[email protected]", "Example User");
$content = file_get_contents("https://fonts.googleapis.com/icon?family=Material+Icons");
$emailBody = <<





Icons

cloud
favorite
attachment
computer
traffic



EOF;

$email->addContent("text/html", $emailBody); 
$sendgrid = new \SendGrid('your API Key');
try {
$response = $sendgrid->send($email);
print $response->statusCode() . "\n";
print_r($response->headers());
print $response->body() . "\n";
} catch (Exception $e) {
echo 'Caught exception: '. $e->getMessage() ."\n";
}

Các biểu tượng sẽ trông giống như hình ảnh sau đây khi được gửi qua email

Phông chữ tham khảo

Tương tự như các biểu tượng, phông chữ tùy chỉnh cũng chỉ được hỗ trợ bởi khoảng 35% ứng dụng email. Tuy nhiên, nếu bạn muốn sử dụng phông chữ tùy chỉnh trong HTML email, bạn có thể sử dụng phương pháp tương tự cùng với một số phông chữ dự phòng cho các ứng dụng email không hỗ trợ phông chữ tùy chỉnh, như trong ví dụ sau

require 'vendor/autoload.php';
$email = new \SendGrid\Mail\Mail(); 
$email->setFrom("[email protected]", "Example User");
$email->setSubject("E main");
$email->addTo("[email protected]", "Example User");
$content = file_get_contents("https://fonts.googleapis.com/css?family=Hubballi&display=swap");
$emailBody = <<




Custom fonts are pretty cool


EOF;

$email->addContent("text/html", $emailBody); 
$sendgrid = new \SendGrid('your API Key');
try {
$response = $sendgrid->send($email);
print $response->statusCode() . "\n";
print_r($response->headers());
print $response->body() . "\n";
} catch (Exception $e) {
echo 'Caught exception: '. $e->getMessage() ."\n";
}

Đây là cách văn bản của ví dụ trên sẽ trông như thế nào khi được gửi qua email tới ứng dụng email hỗ trợ phông chữ tùy chỉnh

Và đây là cách văn bản của ví dụ này sẽ trông như thế nào khi được gửi qua email đến ứng dụng email không hỗ trợ phông chữ tùy chỉnh

Phần kết luận

Tôi hy vọng rằng bài viết này hữu ích và cung cấp cho bạn một cách dễ dàng để tham khảo các biểu định kiểu cho các mục đích khác nhau trong email HTML, thông qua PHP

Matt Nikonorov là nhà phát triển đến từ Kazakhstan với niềm đam mê khoa học dữ liệu, khai thác dữ liệu và máy học. Anh ấy thích phát triển các ứng dụng web và máy tính để bàn để khiến thế giới trở nên thú vị hơn. Khi anh ấy không phát triển, bạn có thể liên hệ với anh ấy qua Twitter

PHP có cần CSS không?

Làm cách nào để viết CSS trong mã PHP?

PHP có sử dụng HTML và CSS không?

Làm cách nào để sử dụng HTML CSS và PHP cùng nhau?